react redux 的 Reducer 拆分 / 优化

  1. 前景提要

在这里插入图片描述

  • 我们的数据放在 store 里面,但是对传递过来的数据进行处理放在 reducers 里面
  • reducers 里面的代码处理方式肯定不少
  • 这样就造成了代码看起来较为复杂,难以修改
  1. 下载 redux 自带的管理工具

npm install --save react-redux 或者 yarn add react-redux

  1. 思路

比如我有一个功能是实现信息添加的

  1. 那我就把请求 action、数据管理 Reducer 都放到一个文件夹下面
  2. 然后把新文件夹里面的 Reducer 的 store 地址更换到外部的 store 地址
  3. store 文件夹下的 Reducer 文件通过combineReducers引用你新创建的 文件夹下面的 Reducer 文件
  4. 既然地址发生改变,那么在组件中引用的 actionCreators.js (action)也要变一下
    在这里插入图片描述

4. 具体操作

  1. 新建文件夹,将具有相同内容的js 文件拖拽到里面

在这里插入图片描述

  1. 主文件 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
  1. 组件引用的 actionCreators(action 请求的创建者) 也要改变
import actionCreators from "../../store/actionCreators"
import actionCreators from "../../store/todoList/actionCreators"
  1. 之前组件使用 store 里面数据地址需要更改

打印现在 store 里面的数据就会发现它的外面 新加了 你添加的对应的 reducer 里面的数据

  • 如果是多个 reducer 文件数据的话,会继续往下排
    在这里插入图片描述

所以在引用数据的时候就要再写上外面的 key 值
在这里插入图片描述


版权声明:本文为qq_44163269原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>