技術標籤：React知識庫reactreduxcombine前端es6

大家好，都吃晚飯了嗎？我是Kaiqisan,是一個已經走出社恐的一般生徒,之前講了vue的狀態管理工具vuex的多檔案配置的方法，這次咱來康康react的狀態管理工具redux的多檔案管理方法把！

前排提示：需要下載相應的依賴包（redux必選）（react-redux, @babel/plugin-proposal-decorators可選）

首先是檔案目錄（簡潔版）

├─components
│  └─Demo1
├─css
├─pages
│  ├─Home
│  ├─Main
├─redux
│  ├─action
│  ├─reducer
│  └─store
├─router
|
└─static
    └─imgs
 

我們把所有的redux的內容全部寫到一個資料夾redux裡面便於後期的統一管理

然後開始我們的操作

• 這個store資料夾不要動它，它沒有什麼改動，就是一個建立store的檔案

• 重點是這個reducer
  這個是它現在的目錄
  

它本來只有一個index.js檔案,然後直接輸出，由store資料夾下的index.js接收
這個index.js檔案的功能有所改變，它現在的功能是接收其他檔案的reducer資訊(對應上圖是app.js和user.js)然後整合在一起輸出

import { combineReducers } from 'redux'
import user from './user'
 

import app from './app'

export default combineReducers({
    user, app // ES6語法，簡寫
})

這個combineReducers 就是今天的核心知識點，它能夠整合所有的reducer檔案資訊，然後拼成一塊輸出到store中，最終形成一個全域性的狀態

• action檔案也應該相應的改動，以便讓開發更加方便
  
  然後開始投入使用

如果有小夥伴使用redux而不是react-redux的話，使用方法如下

• 獲取引數

/* 原先 */
store.getState().num

/* 現在 */
store.getState().user.
 
num

• 觸發動作（action）

/* 原先 */
import { changeNum } from '../../redux/action/index'

send(val) {
    const action = changeNum(val)
    store.dispatch(action)
}
... 

/* 現在 */
import { changeNum } from '../../redux/action/user'

send(val) {
    const action = changeNum(val)
    store.dispatch(action)
}

幾乎沒什麼變化，就是注意要匯入相應方法所在的檔案

雖然是多檔案配置，但它們最終要整合到一個爭整體中，只要觸發了action，然後這個action就會被傳送到reducer中，此時，就會觸發所有模組的switch方法直到找到相應的方法（不信的話在每一個switch方法觸發前用console列印一下）

總結

學一項東西要學會未雨綢繆，否則，自己怎麼死在甲方口裡都不知道！