第三十六章 状态管理工具与总结

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实现多个组件的数据共享。