? 這是我在公司時候做的一個管理界面的React代碼逸嘀，當(dāng)時是因為我leader說Angular坑太多了仿畸，所以叫我學(xué)習(xí)下這個惶岭，重做一遍那個項目T_T示损，于是我就花了一個多月去學(xué)習(xí)又做了一次T_T所以我也只是入門級水平渗磅，發(fā)出來是為了記錄一下自己的心得體會，React-Redux检访、ES6新手可以看看始鱼，大神可以選擇忽略或者給我指點一下~ =。=||
項目名字：React-backmanager
項目語言：ES6脆贵、ReactJs
模塊分析：三個模塊：CampaignContent医清、AddNew、BannerDetail
react的三個大模塊的話卖氨，不跟angular的一樣会烙，因為react是以組件為單位的，所以整個大模塊也是一個大組件筒捺。
用到的關(guān)鍵模塊：react-redux持搜、redux、react-router焙矛、pubsub-js(這個是維持不變的變量用的葫盼。)
redux的作用是維持全局一個store，保持數(shù)據(jù)的單向流動性村斟。
react-redux就是為了跟react配合要加載的模塊
react-router是我們關(guān)鍵的模塊贫导，用于路由.
Redux設(shè)計流程分析
1：首先要知道的一個問題就是抛猫，數(shù)據(jù)是單向流動的還是雙向的？沒錯孩灯，是單向的闺金，由store來保存一個總數(shù)據(jù)。通過修改store的數(shù)據(jù)來實現(xiàn)視圖改變等需求峰档。
2：但是我們知道败匹，其實Redux不單可以和react配合，它也可以跟其他的庫讥巡，框架配合使用的掀亩，所以對于兩個獨立的庫來說，我們必須得把他們建立一個連接欢顷。
基于上面的簡單思考槽棍，我們可以有一個思路來寫代碼了：
1：我們先得要創(chuàng)建一個store：
1.1
說白了，store里面就是一堆數(shù)據(jù)嘛抬驴，那么數(shù)據(jù)怎么來炼七，通過reducer組合而來，所以createStore的時候布持，就要把初始化的數(shù)據(jù)傳進來：rootReducer
1.2 rootReducer代碼截圖:
隨著應(yīng)用越來越大豌拙，一方面，不能把所有的數(shù)據(jù)都放到一個reducer里面题暖，另一方面姆蘸，為每個reducer創(chuàng)建一個store，后續(xù)store的維護就顯得比較麻煩芙委。如何將二者統(tǒng)一起來呢逞敷？
所以：通過combineReducers將多個reducer合并成一個rootReducer，雖然這里只有一個灌侣。
1.3 reducer的構(gòu)建:
而這些常量是自己定義的推捐，如下圖：
每次觸發(fā)修改store數(shù)據(jù)的時候，只需要把制定好的動作執(zhí)行并傳參數(shù)進去就可以了侧啼。
其實常量也就是這些:
那么我們參數(shù)在哪里傳入呢牛柒，下面就定義具體的構(gòu)造如何傳入?yún)?shù)：
這些是action里面的todos我們要執(zhí)行動作的時候，寫得就是這些小寫的function名字痊乾，然后傳入?yún)?shù)皮壁。
2：知道數(shù)據(jù)是怎么弄的，那么接下來我們是要連接redux跟react了：
2.1：就是要使用connect函數(shù)來連接：
connect函數(shù)需要傳入是要融合為store的reducers哪审，所以傳進去的兩個函數(shù)需要返回的是reducers
上面的那個是我們之前看到的那個rootReducer一個叫todos的reducers蛾魄，里面是直接實時數(shù)據(jù)
下面的也是傳入reducers，但是需要根據(jù)給進去的action指令來修改。
connect是一個高階函數(shù)滴须，首先傳入mapStateToProps舌狗、mapDispatchToProps，然后返回一個生產(chǎn)
Component
的函數(shù)(wrapWithConnect)扔水，然后再將真正的Component作為參數(shù)傳入wrapWithConnect(MyComponent)痛侍，這樣就生產(chǎn)出一個經(jīng)過包裹的Connect組件，該組件具有如下特點:
通過this.context獲取祖先Component的store
props包括stateProps魔市、dispatchProps主届、parentProps,合并在一起得到
nextState ，作為props傳給真正的Component
componentDidMount時待德，添加事件this.store.subscribe(this.handleChange)君丁，實現(xiàn)頁面交互
shouldComponentUpdate時判斷是否有避免進行渲染，提升頁面性能磅网，并得到nextState
componentWillUnmount時移除注冊的事件this.handleChange
在非生產(chǎn)環(huán)境下谈截，帶有熱重載功能
2.2：最后在index里面組裝好App這個主組件跟其他組件的關(guān)系筷屡，用redux連接起來：
而因為我們需要做一個過渡動畫涧偷，所以在App這個組件里面，我們需要：
要加載的模塊有：
PubSub的話毙死，是一個提供可以在不同模塊中還能保持讀取的變量的模塊燎潮。
最后是index.html里面在什么地方渲染這些組件：
3：接下來就很簡單地去實現(xiàn)自己要做的構(gòu)建頁面了：
就是不停地把props跟action從父組件傳到子組件里面使用：
例如，我們在最大的store里面?zhèn)魅肫渲械囊粋€BannerDetail組件里面：
我們改變state只能通過setState來改變扼倘，然后就會產(chǎn)生實時的變化确封。
通過對傳入的props來對數(shù)據(jù)進行改變(this.props.actions)和讀取(this.props.todos)
這是對當(dāng)面組件里面添加動作時候的寫法，假如組件里面再菊，還要添加小組件的寫法是：
而在EditFolderName組件里面的代碼是：
就是這樣傳入進行處理爪喘，跟父組件進行交互就可以了。
