Redux 是一个渐进式的状态管理库，它不仅仅是一个库，同时也是一个框架。它提供了一组用于构建复杂应用程序的工具和库，其中包括一些浏览器插件。 在 Chrome 和 Firefox 浏览器上，已经存在一些 Redux 的浏览器插件，例如 Redux DevTools，它可以帮助开发者在开发 Redux 应用程序时更加高效地管理和调试状态。
使用Redux DevTools开发者工具
- 1、在浏览器安装该插件在浏览器的应用商店直接搜索
redux关键字，在结果列表就会出现Redux DevTools插件，我们点击添加即可。
- 2、还需要在项目安装第三方依赖，并修改部分代码
如果只是在浏览器安装了该插件，我们启动项目，并不能向react/vue开发者工具一样直接使用。还要依赖第三方包才能使用。
(1). 安装npm包
npm i redux-devtools-extension
(2). 修改文件store.js的代码
// 引入createStore，专门用于创建redux中最为核心的store对象 import { createStore , applyMiddleware, combineReducers } from 'redux' import countReducer from './reducers/count' import personReducer from './reducers/person' // 引入redux-thunk，用于支持异步action import thunk from 'redux-thunk' import {composeWithDevTools} from 'redux-devtools-extension' const allReducer = combineReducers({ sum: countReducer, peoples: personReducer }) export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
这里我们需要引入composeWithDevTools这个API，它能在浏览器中启用 Redux DevTools 插件，从而提高开发效率和体验
(3). 运行看效果
至此，我们就可以正常使用Redux DevTools开发者工具了。
改良一下项目
- 将多个reducer单独封装引入
由于在项目中可能会存在多个reducer，如果一个一个在store文件中引入，会导致其代码复杂，结构不清晰，不利于我们维护。所以我需要新建一个reducers/index.js来帮我们管理所有的reducers。
import { combineReducers } from 'redux' import count from './count' import person from './person' export default combineReducers({ sum: count, peoples: person })
在将整合好的reducers导入store中：
// 引入createStore，专门用于创建redux中最为核心的store对象 import { createStore , applyMiddleware } from 'redux' // 引入整合后的reducers import allReducer from './reducers' // 引入redux-thunk，用于支持异步action import thunk from 'redux-thunk' // 用于开启浏览器插件redux-devtools import {composeWithDevTools} from 'redux-devtools-extension' export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
- 修改变量命名
之前我们在action里面的函数命名是为了学习，所以命名很长，真正开发的时候变量名称，我们尽量语义化和简洁化。如：
import { ADD_PERSON } from '../constant' // 添加人信息的action export const addPerson = personObj => ({type: ADD_PERSON, data:personObj})
以前的变量名称是:createAddPersonAction现在我们直接叫：addPerson简单明了。其他文件的命名规范亦是如此，这里不在赘述。
总结
最后我们这里做一个简要的总结：
Redux库本身是一个纯JavaScript库，它提供了一组API，用于管理应用程序的状态和数据流。它还提供了一组钩子函数，用于帮助开发人员更好地处理应用程序状态。React-Redux库则是一个react库，它使用Redux库来管理应用程序中的状态和数据流。它使用React组件来构建应用程序，并将Redux库集成到组件中。这样可以使开发人员可以使用React组件来管理应用程序中的状态和数据流。- 我们可以使用
redux和react-redux实现多个组件的数据共享。
