? 這是我在公司時(shí)候做的一個(gè)管理界面的React代碼，當(dāng)時(shí)是因?yàn)槲襩eader說Angular坑太多了，所以叫我學(xué)習(xí)下這個(gè)，重做一遍那個(gè)項(xiàng)目T_T，于是我就花了一個(gè)多月去學(xué)習(xí)又做了一次T_T所以我也只是入門級水平，發(fā)出來是為了記錄一下自己的心得體會，React-Redux、ES6新手可以看看，大神可以選擇忽略或者給我指點(diǎn)一下~ =。=||
項(xiàng)目名字：React-backmanager
項(xiàng)目語言：ES6、ReactJs
模塊分析：三個(gè)模塊：CampaignContent、AddNew、BannerDetail
react的三個(gè)大模塊的話，不跟angular的一樣，因?yàn)閞eact是以組件為單位的，所以整個(gè)大模塊也是一個(gè)大組件。
用到的關(guān)鍵模塊：react-redux、redux、react-router、pubsub-js(這個(gè)是維持不變的變量用的。)
redux的作用是維持全局一個(gè)store，保持?jǐn)?shù)據(jù)的單向流動性。
react-redux就是為了跟react配合要加載的模塊
react-router是我們關(guān)鍵的模塊，用于路由.
Redux設(shè)計(jì)流程分析
1：首先要知道的一個(gè)問題就是，數(shù)據(jù)是單向流動的還是雙向的？沒錯，是單向的，由store來保存一個(gè)總數(shù)據(jù)。通過修改store的數(shù)據(jù)來實(shí)現(xiàn)視圖改變等需求。
2：但是我們知道，其實(shí)Redux不單可以和react配合，它也可以跟其他的庫，框架配合使用的，所以對于兩個(gè)獨(dú)立的庫來說，我們必須得把他們建立一個(gè)連接。
基于上面的簡單思考，我們可以有一個(gè)思路來寫代碼了：
1：我們先得要創(chuàng)建一個(gè)store：
1.1
說白了，store里面就是一堆數(shù)據(jù)嘛，那么數(shù)據(jù)怎么來，通過reducer組合而來，所以createStore的時(shí)候，就要把初始化的數(shù)據(jù)傳進(jìn)來：rootReducer
1.2 rootReducer代碼截圖:
隨著應(yīng)用越來越大，一方面，不能把所有的數(shù)據(jù)都放到一個(gè)reducer里面，另一方面，為每個(gè)reducer創(chuàng)建一個(gè)store，后續(xù)store的維護(hù)就顯得比較麻煩。如何將二者統(tǒng)一起來呢？
所以：通過combineReducers將多個(gè)reducer合并成一個(gè)rootReducer，雖然這里只有一個(gè)。
1.3 reducer的構(gòu)建:
而這些常量是自己定義的，如下圖：
每次觸發(fā)修改store數(shù)據(jù)的時(shí)候，只需要把制定好的動作執(zhí)行并傳參數(shù)進(jìn)去就可以了。
其實(shí)常量也就是這些:
那么我們參數(shù)在哪里傳入呢，下面就定義具體的構(gòu)造如何傳入?yún)?shù)：
這些是action里面的todos我們要執(zhí)行動作的時(shí)候，寫得就是這些小寫的function名字，然后傳入?yún)?shù)。
2：知道數(shù)據(jù)是怎么弄的，那么接下來我們是要連接redux跟react了：
2.1：就是要使用connect函數(shù)來連接：
connect函數(shù)需要傳入是要融合為store的reducers，所以傳進(jìn)去的兩個(gè)函數(shù)需要返回的是reducers
上面的那個(gè)是我們之前看到的那個(gè)rootReducer一個(gè)叫todos的reducers，里面是直接實(shí)時(shí)數(shù)據(jù)
下面的也是傳入reducers，但是需要根據(jù)給進(jìn)去的action指令來修改。
connect是一個(gè)高階函數(shù)，首先傳入mapStateToProps、mapDispatchToProps，然后返回一個(gè)生產(chǎn)
Component
的函數(shù)(wrapWithConnect)，然后再將真正的Component作為參數(shù)傳入wrapWithConnect(MyComponent)，這樣就生產(chǎn)出一個(gè)經(jīng)過包裹的Connect組件，該組件具有如下特點(diǎn):
通過this.context獲取祖先Component的store
props包括stateProps、dispatchProps、parentProps,合并在一起得到
nextState ，作為props傳給真正的Component
componentDidMount時(shí)，添加事件this.store.subscribe(this.handleChange)，實(shí)現(xiàn)頁面交互
shouldComponentUpdate時(shí)判斷是否有避免進(jìn)行渲染，提升頁面性能，并得到nextState
componentWillUnmount時(shí)移除注冊的事件this.handleChange
在非生產(chǎn)環(huán)境下，帶有熱重載功能
2.2：最后在index里面組裝好App這個(gè)主組件跟其他組件的關(guān)系，用redux連接起來：
而因?yàn)槲覀冃枰鲆粋€(gè)過渡動畫，所以在App這個(gè)組件里面，我們需要：
要加載的模塊有：
PubSub的話，是一個(gè)提供可以在不同模塊中還能保持讀取的變量的模塊。
最后是index.html里面在什么地方渲染這些組件：
3：接下來就很簡單地去實(shí)現(xiàn)自己要做的構(gòu)建頁面了：
就是不停地把props跟action從父組件傳到子組件里面使用：
例如，我們在最大的store里面?zhèn)魅肫渲械囊粋€(gè)BannerDetail組件里面：
我們改變state只能通過setState來改變，然后就會產(chǎn)生實(shí)時(shí)的變化。
通過對傳入的props來對數(shù)據(jù)進(jìn)行改變(this.props.actions)和讀取(this.props.todos)
這是對當(dāng)面組件里面添加動作時(shí)候的寫法，假如組件里面，還要添加小組件的寫法是：
而在EditFolderName組件里面的代碼是：
就是這樣傳入進(jìn)行處理，跟父組件進(jìn)行交互就可以了。
