react redux 的 Reducer 拆分 / 优化
- 前景提要
- 我们的数据放在 store 里面,但是对传递过来的数据进行处理放在 reducers 里面
- reducers 里面的代码处理方式肯定不少
- 这样就造成了代码看起来较为复杂,难以修改
- 下载 redux 自带的管理工具
npm install --save react-redux
或者 yarn add react-redux
- 思路
比如我有一个功能是实现信息添加的
- 那我就把请求 action、数据管理 Reducer 都放到一个文件夹下面
- 然后把新文件夹里面的 Reducer 的 store 地址更换到外部的 store 地址
- store 文件夹下的 Reducer 文件通过
combineReducers
引用你新创建的 文件夹下面的 Reducer 文件 - 既然地址发生改变,那么在组件中引用的
actionCreators.js
(action)也要变一下
4. 具体操作
- 新建文件夹,将具有相同内容的js 文件拖拽到里面
- 主文件 reducer.js 引用 新文件里面 的 reducer.js 文件
import {combineReducers} from "redux" //引入 combineReducers
import todoList from './todoList/reducer' //引入对应的文件
import calcueator from './todoList/calcueator'
const reducer = combineReducers({ //通过 combineReducers 添加到 reducer 里面
todoList,
calcueator
})
export default reducer
- 组件引用的 actionCreators(action 请求的创建者) 也要改变
import actionCreators from "../../store/actionCreators"
import actionCreators from "../../store/todoList/actionCreators"
- 之前组件使用 store 里面数据地址需要更改
打印现在 store 里面的数据就会发现它的外面 新加了 你添加的对应的 reducer 里面的数据
- 如果是多个 reducer 文件数据的话,会继续往下排
所以在引用数据的时候就要再写上外面的 key 值
版权声明:本文为qq_44163269原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END