关于 Redux ，从基础实现到现代集成

最新推荐文章于 2024-09-15 10:33:02 发布

糖糖老师436

最新推荐文章于 2024-09-15 10:33:02 发布

阅读量577

点赞数 9

分类专栏：前端程序员文章标签：前端开发语言

本文链接：https://blog.csdn.net/2402_85402030/article/details/139439464

版权

程序员同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

前端

63 篇文章 0 订阅

订阅专栏

什么是 Redux

Redux 是一种集中状态管理工具，常与 React 一起使用，但也可以独立运行。
作用：通过集中管理应用状态，简化数据流管理和状态变更

为什么要使用 Redux

解耦组件：无视组件层级关系，简化组件间通信。
单向数据流：数据流清晰，易于调试和定位问题。
调试工具：提供完善的调试工具，便于跟踪状态变化。

Redux 快速体验（使用基础实现的方式）

需求：不和任何框架绑定，不使用任何构建工具，使用 Redux 实现计数器
实现步骤：
1. 定义 reducer 函数：根据当前的操作类型返回新的状态。
  js
  
  复制代码
  function reducer (state = { count: 0 }, action) { if (action.type === 'INCREMENT') { return { count: state.count + 1 } } if (action.type === 'DECREMENT') { return { count: state.count - 1 } } return state }
2. 创建 store：使用 createStore 方法生成一个 store 实例
  js
  
  复制代码
  const store = Redux.createStore(reducer)
3. 订阅状态变化：使用 subscribe 方法订阅状态变化，更新视图。
  js
  
  复制代码
  store.subscribe(() => { console.log('state变化了', store.getState()) document.getElementById('count').innerText = store.getState().count })
4. 提交 action 对象：使用 dispatch 方法提交 action 对象，触发状态变化。
  js
  
  复制代码
  const inBtn = document.getElementById('increment') inBtn.addEventListener('click', () => { store.dispatch({ type: 'INCREMENT' }) }) const dBtn = document.getElementById('decrement') dBtn.addEventListener('click', () => { store.dispatch({ type: 'DECREMENT' }) })
5. 更新视图：初始渲染视图。
  js
  
  复制代码
  <button id="decrement">-</button> <span id="count">0</span> <button id="increment">+</button>

Redux 管理数据流程梳理

为了职责清晰，数据流向明确， Redux 把整个数据修改的流程分成了三个核心概念，分别是：state、action 和 redure

state：存储应用状态的对象
action：描述状态变更的对象
reducer：根据 action 描述生成新状态的函数

Redux 与 React 环境准备

配套工具

在 React 中使用 redux，官方要求安装俩个其它插件
- Redux Toolkit：简化 Redux 逻辑编写的官方推荐工具。
- react-redux：连接 Redux 和 React 组件的中间件。

配置基础环境

使用 CRA 快速创建 React 项目
js

复制代码
npx create-react-app react-redux
安装配套工具
js

复制代码
npm i @reduxjs/toolkit react-redux
启动项目
js

复制代码
npm run start

store 目录结构设计

截屏2024-02-26 16.29.11.png

通常集中状态管理的部分都会单独创建一个单独的 store 目录
应用通常会有很多个字 store 模块，所以创建一个 modules 目录，在内部编写业务分类的子 store
store 中的入口文件 index.js 的作用是组合 modules 中所有的子模块，并导出 store

使用 Redux与 React 实现 counterStore

创建 counterStore

counterStore.js 文件
js

复制代码
import { createSlice } from "@reduxjs/toolkit" const counterStore = createSlice({ name:"counter", initialState:{ count:0 }, reducers:{ increatement(state){ state.count++ }, decreatement(state){ state.count-- } } }) const {increatement, decreatement} = counterStore.actions const reducer = counterStore.reducer export {increatement, decreatement} export default reducer
store/index.js
js

复制代码
import { configureStore } from "@reduxjs/toolkit" import counterReducer from "./modules/counterStore" const store = configureStore({ reducer:{ counter: counterReducer } }) export default store

注入 store

react-redux 负责把 Redux 和 React 连接起来，内置 Provider 组件通过 store 参数把创建好的 store 实例注入到应用中，链接正式建立

复制代码

import store from "./store"; import { Provider } from "react-redux"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode> );

React 组件使用 store 中的数据

在 React 组件中使用 store 中的数据，需要用到一个钩子函数 useSelector，它的作用是把 store 中的数据映射到组件中，使用示例：

复制代码

const { count } = useSelector((state) => state.counter);

React 组件修改 store 中的数据

React 组件中修改 store 中的数据需要借助另外一个 hook 函数 useDispatch，它的作用是生成提交 action 对象的 dispatch 函数

复制代码

import { useDispatch, useSelector } from "react-redux"; import { decreatement, increatement } from "./store/modules/counterStore"; function App() { const { count } = useSelector((state) => state.counter); const dispatch = useDispatch() return ( <div className="App"> <button onClick={() => {dispatch(decreatement())}}>-</button> {count} <button onClick={() => {dispatch(increatement())}}>+</button> </div> ); } export default App;

Redux 与 React 提交 action 参数

在 reducers 的同步修改方法中添加 action 对象参数，在调用 actionCreater 的时候传递参数，参数会被传递到 action 对象的 payload 属性上

复制代码

return ( <div className="App"> <button onClick={() => {dispatch(decreatement())}}>-</button> {count} <button onClick={() => {dispatch(increatement())}}>+</button> <button onClick={() => {dispatch(addToNum(20))}}>+20</button> </div> );

复制代码

addToNum(state, action) { state.count = action.payload; },

总结

通过从基本的 Redux 实现到在 React 中的集成，逐步演示了如何创建和管理集中状态。通过定义 reducer 函数、创建 store 实例、订阅状态变化、提交 action 对象等步骤，构建了一个简单的计数器应用。同时，介绍了 Redux Toolkit 的使用和 react-redux 中间件的配置，以便更高效地管理状态。在实际项目中，结合 Redux 强大的调试工具和良好的社区支持，可以显著提升开发效率和代码质量。

原文链接：https://juejin.cn/post/7374551836912009250