07.使用Redux DevTools Extension工具以及combineReducers对数据拆分管理

最新推荐文章于 2025-03-10 16:06:09 发布

zhuhui2000

最新推荐文章于 2025-03-10 16:06:09 发布

阅读量247

点赞数

分类专栏：简书项目

本文链接：https://blog.youkuaiyun.com/zhuhui2000/article/details/90702085

版权

简书项目专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用Redux DevTools Extension工具进行项目配置，它提供了方便的监听器功能。通过实例展示了如何拆分reducers，将它们组织成小的模块，如在'common-header'目录下创建store并编写reducer.js。同时强调了在Header目录下通过添加header前缀来正确传输和使用数据的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先Redux DevTools Extension是什么，用来干嘛？
Redux DevTools Extension 提供了大部分常用的监听器去配置你的项目，不需要安装任何模块（其实有安装选项）。配置极其简单
1.我们只需要在store目录下的index文件中引入：
在这里插入图片描述
效果：

2.根据不同块，将reducer拆分成很多小的reducer.

在common–>header下新建一个文件夹store,这个store中的数据是header这一块的，在store下新建reducer.js.
将之前src目录下的store的reducer中的代码拷贝到header下面的reducer.
这是src目录下的store的reducer可以看做是一个大的集合，其中包含了不同块的reducer。这使我们需要在这里面把小的reducer做一个结合：

//引入combineReducers，这里的headerReducer是自定义的方便理解
import { combineReducers } from 'redux';
import headerReducer from '../common/header/store/reducer';
//将结合的reducer导出
export default combineReducers({
    header:headerReducer
})

在这里插入图片描述
这里我们可以看到focused已经在header下面。所以我们在Header目录下的index.js文件中进行数据传输时，应该加一个header,不然动画效果实现不了

然后就完成了reducer的拆分