React demo：express、react-redux、react-router、react-roter-redux、redux-thunk（二）

　　上一篇雜七雜八說了下express部分的，如今開始進入正題。

　　接下去的順序，就是項目從零開始的順序（思路方向）。

 

【actions定義】

　　如圖，目錄頁，有4部分的內容，因此如下幾個actions是須要的：initTags、initLatest、initTimeline、initDirectory，而後點擊tags和timeline後，出來的通過篩選的目錄列表，因此還須要一個initDirectoryFilter的action，另外點擊某個文章title後，查看具體的文章內容，因此還須要一個initPaper的action。

　　大體，思路就是這樣，而後關於目錄組織，以及action的寫法（以initTags爲例），我作了以下的調整（主要仍是我的習慣），可以正常導出就好。

　　

　　按照以上的actions文件夾下的index.js的寫法，從別的地方引入模塊，import整個actions便可（可參考下一部分，reducers的引入方式）。

　　另外，由於一開始必然不會把數據什麼全考慮進來，因此能夠暫時把傳入的data去掉，具體以下圖所示（以initTags爲例）。

 

【reducers部分】

　　對應actions，每一個action對應到一個reducer。按照本來的設想，由於有多個頁面（其實好像只有三個：directory、directoryFilter、paper），每一個頁面對應一個reducer，而後配合

react-router-redux，方便管理，後來爲了偷懶，直接寫到一個reducer裏面算了。

　　具體，看代碼部分吧（以 initTags爲例）。

 

　　和actions中的index.js相似，在main.js中引入reducer，直接import整個reducer便可，具體等會看main.js的內容。

　　另外，由於一開始必然沒有考慮那麼全，並且數據相關的也不太會一會兒就接進來，因此剛開始只作 「搭結構」這動做就能夠了，具體以下圖代碼所示（以 initTags爲例）。

 

【搭骨架】

　　好吧，取名有點取不出來了，只能這樣了。

　　基本上，把actions和reducers定義好，而後就開始要把他們兩個給用上了，可是如今網站的頁面部分還沒開始（或者完成），那就只有老老實實開始寫了。

　　根據原網站（ 傳送門），大體須要用到如下幾個：前端路由（ react-router）、配合路由使用的redux（ react-redux和 react-router-redux），這兩樣是額外的，至於其餘bootstrap靜態文件、自定義的css文件等，默認當成必須的了。

　　先從main.js開始（由於涉及到路由，因此先從總的入口文件開始，把路由定好），具體以下圖代碼所示。

 

　　有個東西差點忘了，由於這個是我最後的main.js的樣子，我取數據用了ajax異步獲取，因此用了redux-thunk，可是一開始沒有用到，直接使用，會致使出錯（action返回的是一個object，redux-thunk會把原action改造，使其可以接收function，詳細的有點不太描述的清，大體應該是沒錯），因此，剛開始的時候，由於沒用到ajax，能夠先把 createStore中的 applyMiddleware進行省略，使現階段的流程可以正常走下去。

　　

　　另外，能夠看到頁面部分是有個indexPage的，可是這個頁面部分實際只是靜態的，和其餘的主要頁面相關性不大，因此暫時不用理會了。

　　

　　暫時，如今先寫到這裏，後續再繼續聊containers和components部分，以及如何把同步的action改爲異步的action。