redux多文件配置 - Kaiqisan

大家好，都吃晚饭了吗？我是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打印一下）

总结

学一项东西要学会未雨绸缪，否则，自己怎么死在甲方口里都不知道！