Redux DevTools 概述
- Redux DevTools 是一款 Redux 官方提供的浏览器调试工具
- 可以让我们很方便的对 Redux 保存的状态进行追踪调试
GitHub 地址：https://github.com/reduxjs/redux-devtools
使用 Redux DevTools
- 在浏览器中安装 Redux DevTools
- 添加 Redux DevTools 中间件配置, 官方配置文档地址：https://github.com/zalmoxisus/redux-devtools-extension
需要添加如下配置项，即可完成 Redux DevTools 的配置，然后就可以进行监控我们所派发的任务和状态的变更过程。
import {compose} from 'redux'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
const store = createStore(reducer, composeEnhancers(storeEnhancer));
添加如上三行代码即可完成，效果如下：
Redux优化
当前 reducer 存在的问题：
所有的操作都是在一个 reducer 中处理的, 如果项目很复杂, 那么会变得非常难以维护
如何解决：
对 reducer 进行拆分
官方文档地址：https://www.redux.org.cn/docs/recipes/StructuringReducers.html
那么接下来就开始第一步的优化就是，拆分 reducer，目前我们的示例项目当中有两个组件分别是 Home 与 About，那么我们这里就将不同组件的 Reducer 进行拆分，更改 reducer.js：
Home:
// Home let initialHomeState = { count: 1 }; function homeReducer(homeState = initialHomeState, action) { switch (action.type) { case ADD_COUNT: return {...homeState, count: homeState.count + action.num}; case SUB_COUNT: return {...homeState, count: homeState.count - action.num}; default: return homeState; } }
About:
// About let initialAboutState = { info: {} }; function aboutReducer(aboutState = initialAboutState, action) { switch (action.type) { case CHANGE_INFO: return {...aboutState, info: action.info}; default: return aboutState; } }
统一封装成一个 reducer 进行导出使用：
function reducer(state = {}, action) { return { countData: homeReducer(state.countData, action), infoData: aboutReducer(state.infoData, action) } }
更改一下 About 与 Home 组件的使用：
Home.js:
const mapStateToProps = (state) => { return { count: state.countData.count } };
About.js:
const mapStateToProps = (state) => { return { info: state.infoData.info, } };
如上就是第一个可优化的点，如果项目庞大了就可以很好的方便我们进行维护和管理，接下来还有其它问题需要解决，在解决之前首先我们来看一个东西就是 为什么 Redux 中的处理函数叫做 reducer：
- 因为在数组中也有一个叫做 reducer 函数, 这个函数的特点是: 会将上一次的返回结果作为下一次的参数
- 同理在 Redux 中这个处理函数也会将上一次的返回结果作为下一次的参数, 所以就叫做 reducer
关于如上合并拆分之后的 reducer 的方式其实有其它的方式，分别如下：
- 手动合并 (2B)
- 通过 Redux 提供的合并函数来合并
通过 Redux 提供的合并函数来合并编写步骤如下首先导入合并函数：
import {combineReducers} from 'redux';
使用合并函数：
const reducer = combineReducers({ countData: homeReducer, infoData: aboutReducer });
当前 Redux 还存在的其它问题，就是我们的 action 与 constants、reducer 都写在一个文件当中这样下来，如果项目做得比较久了内容会非常的多，那么对于我们后期的迭代就很不方便，所以需要在将这个点进行优化一下，在 store 文件夹当中创建 Home 与 About 文件夹，然后在这两个文件夹当中分别创建对应的 action.js、constants.js、reducer.js，在这三个文件中编写对应组件的任务，与对应的处理逻辑。
Home:
// action.js import { ADD_COUNT, SUB_COUNT, } from './constants'; // 利用action来修改状态 export const addAction = (num) => { return {type: ADD_COUNT, num: num}; }; export const subAction = (num) => { return {type: SUB_COUNT, num: num}; }; // constants.js export const ADD_COUNT = 'ADD_COUNT'; export const SUB_COUNT = 'SUB_COUNT'; // reducer.js import { ADD_COUNT, SUB_COUNT, } from './constants'; let initialHomeState = { count: 0 }; function homeReducer(homeState = initialHomeState, action) { switch (action.type) { case ADD_COUNT: return {...homeState, count: homeState.count + action.num}; case SUB_COUNT: return {...homeState, count: homeState.count - action.num}; default: return homeState; } } export default homeReducer;
About:
// action.js import { CHANGE_INFO, GET_USER_INFO } from './constants'; export const changeAction = (info) => { return {type: CHANGE_INFO, info: info}; }; export const getUserInfo = () => { return {type: GET_USER_INFO} } // constants.js export const CHANGE_INFO = 'CHANGE_INFO'; export const GET_USER_INFO = 'GET_USER_INFO'; // reducer.js import { CHANGE_INFO } from './constants'; let initialAboutState = { info: {} }; function aboutReducer(aboutState = initialAboutState, action) { switch (action.type) { case CHANGE_INFO: return {...aboutState, info: action.info}; default: return aboutState; } } export default aboutReducer;
然后最终我们的 Redux 的目录结构可以演变成如下所示的样子：
reducer.js
import homeReducer from './Home/reducer'; import aboutReducer from './About/reducer'; import {combineReducers} from 'redux'; const reducer = combineReducers({ countData: homeReducer, infoData: aboutReducer }); export default reducer;
到此 Redux 的优化内容大致就这些了，End
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
