手把手教你實現全棧博客項目（2）-前端react-xxx、路由配置
項目地址：https://github.com/Nealyang/React-Express-Blog-Demo
本想等項目做完再連載一波系列博客，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的， 如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾
本博客為連載代碼博客同步更新博客，隨著項目往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！
react-redux 配置說明
reducer
首先我們在項目/app/reducers下新建一個index.js，用於導出所有的reducer。 也用於將admin、front等reducer匯總的文件。最後combineReducers後直接導出。
上面admin,reducer,front是別的文件中的reducer處理。這裡我們可以暫時導出一個空的state。
對應的每一個子reducer書寫大致如下：
定義initialState（這個state節點上的initialState，不總的state），actions，actionTypes以及reducer。然後倒入reducer。 在index中引入後，即為state中的admin節點。
configureStore
配置store的文件。這個文件的功能正如其名，就是配置store的。其中我們主要做了如下工作。
applyMiddleware->將一些中間件、reducer、裝在進去
區分環境，判斷是否需要加入開發工具。如：devToolsExtension
配合熱更新
createStore
代碼如下：
最後倒入store，用於在App中使用。
react-router 配置說明
react-router中的配置主要在/container/index.js文件中。該文件負責導出所有路由中的文件。
說一下該項目的路由大致規則。默認情況下，輸入域名（我們這裡是localhost），直接進入首頁。也就是我們項目中的front部分。
所以根據路由配置先具體後模糊的規則。並且這裡牽涉到路由嵌套，所以必定抽離出組件來：
index.js render部分如下:
因為路由模糊的部分只要front部分是最模糊的，所以我們把它匹配到最下面。別的大家應該都沒有疑惑，至於isFetch notification後面會介紹。 至於為什麼要在這裡放這些isFetch和notification。因為這是所有路由的最外面一層，是front和admin界面下公共的部分。Loading載入圖標，全局提示信息都可以公用。 所以我們放在最外層。
一定記住。能公用的一組東西，我們一定是放到路由匹配的最外層。
下面看下Font和admin的代碼
admin:
注意admin中的路由匹配，這裡必須要使用,否則你點擊link你會發現路由跳轉成功了，但是對應頁面沒有渲染。
結束語
至此，這個項目的redux，router基本就配置完成了。後續隨著開發，回往/app/reducers中在添加對應的reducer。以及在路由中添加新建的頁面。
如果您有更好想法，歡迎您聯繫我。我們一起改進~
如果有什麼不明白的地方，歡迎提issue。我會第一時間處理。
交流
倘若有哪裡說的不是很明白，或者有什麼需要與我交流，歡迎各位提issue。或者加群聯繫我~
歡迎兄弟們加入：
TAG:前端的全棧之路 |