摘要：在線注冊賬號，數(shù)據(jù)存儲于。年了，還不使用的異步控制體系。過度對數(shù)據(jù)模型進行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲數(shù)據(jù)有關。

為什么又是Todo，全世界的初學者都在做todo嗎？可能很多人要問這句話，其實這句話可以等同于：

為什么你做了個云音樂播放器？

為什么你做了個新聞閱讀APP？

為什么你做了個VUE/REACT版本的CNODE？

究其本質(zhì)，這幾個應用都是data-map模式，哈哈哈哈這是我自己創(chuàng)的詞，意思就是說，本質(zhì)都是拿到一組數(shù)據(jù)，然后就像遍歷數(shù)組一樣將這些數(shù)據(jù)遍歷渲染，這類project都可以算是pure-data-driven的。

至于我為什么做了Todo，答案很簡單，我初學react&redux時接觸的例子就是Todo，將這個app進行功能拓展，將會使用到react和redux的各種特性。

這個App的UI直接參考了知乎@黃玄的Vue寫的TodoApp，已經(jīng)獲得他本人的許可。設計活兒太磨人，本著熟練react&redux的項目實戰(zhàn)的目的，UI和交互就沒有想花太多時間去設計，直接照著樣子寫了一個，他的代碼我可一個字都沒看過，別噴我山寨哈哈哈。

Byemess

Github
如果對你有有所啟發(fā)或者幫助，送我一個star吧 :)

哈哈哈用drawer來插入一下自我推廣的信息貌似是常用套路？主要的頁面導航使用bottomBar去切換，這樣切換起來更加方便。

標準目錄結(jié)構(gòu)，有兩個地方提一下：

styled 用來存儲所有經(jīng)過styled-components進行裝飾后的組件，清一色presentational components，所以移入components目錄下是沒有問題的，但考慮到它的feature，在項目存在潛在規(guī)模擴大可能時，通過Feature進行分類更好，所以就沒有進行合并。

對于components 和 container的分類市面上真是五花八門，對我而言，我更傾向跟隨redux作者（真是帥啊）的定義： It"s up to whether the component is aware of Redux，通俗點說，不需要connect至store的組件都不是container. 這樣的確make sense， 不過在組件的分配上會顯得有點奇怪，這就比較考功力和經(jīng)驗了。

Single Page App

在線注冊賬號，數(shù)據(jù)存儲于leanCloud。

todoItem增刪改，數(shù)據(jù)同步到云

根據(jù)完成情況切換視圖

添加日期標簽，所有item按日期分組

React： 全套ES6及以上語法，生命周期函數(shù)，ref操作，動態(tài)渲染，應有盡有。

Redux： 采用最佳實踐，針對不同的邏輯state管理進行拆分，然后combine之. 采用Thunk處理Action，控制異步操作。

React-Routerv4：跟以前的版本有顯著變化，構(gòu)建單頁APP利器。

Styled-Components: 強推，什么BEM，什么CSS-Module，通通靠邊，結(jié)合Helper: Styled-props，徹底解決css組件化方案。告別預處理器，避免創(chuàng)造更多學習成本。

Webpack： 自動化構(gòu)建，采用chunkhash方式分類打包文件，優(yōu)化用戶緩存策略。

CSS3: 結(jié)合CSSTransitionGroup，創(chuàng)建組件過場動畫，優(yōu)化體驗。

underscore: 用它還是用lodash都行，我只是需要用一下里面的debounce，用來控制edit todoItem時API通信的頻率。其實自己手寫一個helper也行，在學習redux的練手項目里我就手寫= = 。

后續(xù)可能優(yōu)化使用的:

reselect: 再也不用手寫那么多重復的state selector了！

immutable： 感受函數(shù)式的威力。

redux saga: 2017年了，還不使用generator的異步action控制體系。

state的設計主要針對數(shù)據(jù)的獲取與查找策略，模擬數(shù)據(jù)庫的方式，建立LookupTable，存儲目標id，遍歷id進行數(shù)據(jù)拉取。這樣的方式好處是在分狀態(tài)顯示todoItems時只需要操作id，而不需要操作數(shù)據(jù)實體，提高性能。 但是同時也遇到一個問題： 針對查找策略對應確定的api層構(gòu)造相對耦合，數(shù)據(jù)拉取方式無法本地模仿，因此讓我放棄了使用LocalStorage的進行離線狀態(tài)的支持。 黃玄的策略是優(yōu)先進行本地操作，用戶可以選擇上傳或者下載數(shù)據(jù)，這個方式不錯，對我有所啟發(fā)。 過度對數(shù)據(jù)模型進行裝飾的結(jié)果便是高耦合，這跟我初衷是基于在線存儲數(shù)據(jù)有關。 算是一個教訓。

之前想要給登錄成功頁面添加延時跳轉(zhuǎn)的功能，以便使用戶體驗更加完整，但是嘗試未果，原因是login頁面和list頁面本質(zhì)上是兩個route下的組件，進行切換時會進行拉取數(shù)據(jù) => Re-render，一旦我登錄后再次進入login頁面，無論我在login組件里如何嘗試記錄上一次的狀態(tài)進行比對（componentWillReceiveProps)，都是徒勞。 后來想到根目錄下App組件可以進行connect保存一個登錄的flag，以此來確保第一次從未登錄狀態(tài)進入登錄狀態(tài)時時才會進行跳轉(zhuǎn)。但是我沒有這樣做，我實在不想污染APP這個root組件，除非再包一層...

跳轉(zhuǎn)部分React-router并沒有提供更多API，其Redirect的時間上的可操控性不高，只能依賴注入BrowserHistory屬性來進行人工push地址，略為丑陋。鄙人才疏學淺，相信不久后能找到更優(yōu)雅的方式。

耗費時長：從學習React&Redux開始，花費了相對較多的時間在學習相關的綜合知識（組件設計，結(jié)構(gòu)設計，reducer，action的結(jié)構(gòu)最佳實踐等等），使得我的項目遲遲未能開工，個人可能更習慣有所深度的學習后再進行實踐，也是貪了想少走彎路的念頭。然后習慣性被炫酷的技術吸引，研究了兩天react-motion（膜拜@chengmo大神啊，咱們中國小伙有智慧），因為當時想要實現(xiàn)drag Sortable List的效果，后來回過神來，先做出基本再說！這個APP從做出原型到重構(gòu)修改總工時粗略計算大概不到8天，如果擼起袖子直接干，應該可以壓縮到6天。當然了學習成本不可忽略，我給自己的時長計算時從0了解到輸出成品。

App效果： 給自己打7分，可優(yōu)化拓展的東西太多。還記得我說的data-map模型嗎？我完全可以把這個App打造成一個工作臺，把之前那些滿地飛的項目都囊括進來，可以加大練習技術的力度，這樣我就可以終結(jié)滿知乎鬧的什么“為何vue的demo比react多”之類的無聊話題，純屬Vue好上手！文檔親切直白如私教！各大中文網(wǎng)示例重構(gòu)demo多到不行好嗎！光是react這英文環(huán)境就夠國內(nèi)60%程序猿吃一壺了。（扯遠了哈哈哈）

及時總結(jié)： 學習的時候容易懵逼容易記憶斷片怎么辦?。窟@一度讓我很苦惱，為了加速學習進程，唯有： 總結(jié)！梳理！寫博客！于是誕生了這倆貨：（新手朋友們看一看對概念原理理解一定會有幫助）

我的第一本Redux小書（基礎部分）

Redux上手思維導圖

自學上手效率： 曾經(jīng)一度不是很自信，當然了都是老大徒傷悲云云，對自己的真實實力還是有一定自信，我相信我能夠短時間接受并運用甚至拓展所學知識，我也的確做到了。由于一開始便對react有迷之好感（這輩子第一次對一個技術生態(tài)有這種感覺），加上自己英語無壓力，閱讀了許多關于react技術棧的文章，了解了刀耕火種到現(xiàn)在一片大繁榮的react體系下的技術變遷，對知識體系有了一個宏觀的把控，這個階段大概一周，期間還看著網(wǎng)上的教程寫了幾個小demo用來針對訓練一些技術點：比如父子雙向通信，生命周期函數(shù)使用場景，異步action處理方案，模擬redux內(nèi)部核心功能：github（1），github（2）。 我個人的思維很發(fā)散，容易噼里啪啦想到很遠很歪，導致了以前學習過程中缺乏統(tǒng)一的節(jié)奏，一下?lián)v鼓一下動畫隊列，一下看看源碼，沒有很持久的去做一件事，這次算是圓滿啦。不過這次能上手這么快，也得益于以前javascript的基礎，細節(jié)不保證全部能回憶，但是思想和經(jīng)驗都沉淀進了自己的腦子，接下來要去找工作，還得把基礎好好過一遍，重中之重！

解決實際問題的能力： 現(xiàn)在自己解決問題的感覺越來越好，可以快速定位問題的癥結(jié)，擅用搜索引擎（我真的好久好久沒有用過baidu了...)，specific的問題會一股腦先用文字輸出的形式描述一遍，這樣讓問題的結(jié)構(gòu)在腦中有個印象，然后過一會兒回來自己就萌發(fā)idea，然后嘗試 -> 解決。 最后一句： 靠自己。