React18学习笔记（三）——redux状态管理工具

1. Redux快速上手

1.1 什么是Redux？

Redux 是 React 最常用的 集中状态管理工具 ，类似于 Vue 中的 Pinia（Vuex）， 可以独立于框架运行

作用：

• 通过集中管理的方式管理应用的状态

1.2 Redux快速体验

不和任何框架绑定，不使用任何构建工具，使用纯Redux实现计数器

模版：

使用步骤：

① 定义一个 reducer 函数 （根据当前想要做的修改返回一个新的状态）

② 使用createStore方法传入 reducer函数 生成一个 store实例对象

③ 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）

④ 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）

• 也就是说 action 对象就是 { type: 'INCREMENT' }

⑤ 使用store实例的 getState方法 获取最新的状态数据更新到视图中

1.3 Redux管理数据流程梳理

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

• state - 一个对象 存放着我们管理的数据状态
• action - 一个对象 用来描述你想怎么改数据
• reducer - 一个函数 根据 action 的描述生成一个新的 state

1.4 Redux 原理

① action

• 动作对象
• 包括两个属性：
  • type：标识属性，值为字符串，唯一，必要属性
  • data：数据属性，值类型任意，可选属性
• 例子： { 'type' : 'add', data: 1 }

② reducer

• 用于初识化状态、加工状态
• 加工时，根据就的 state 和 action，产生新的 state 的纯函数

③ store

• 将state、action、reducer 联系在一起的对象
• 如何得到此对象
  • import { createStore } from ‘redux’
  • import reducer from './reducers'

  • const store = createStore(reducer)

• 此对象的功能

  • getState() ：得到 state

  • dispatch(action)：分发 action，触发 reducer 调用，产生新的 state

  • subscribe(listener)：注册监听，当产生了新的 state 时，自动调用

2. Redux与React - 环境准备

2.1 配套工具

在 React 中使用 redux，官方要求安装俩个其他插件 - Redux Toolkit 和 react-redux

① Redux Toolkit（RTK）- 官方推荐编写Redux逻辑的方式，是一套工具的集合集， 简化书写方式

• 简化 store 的配置方式
• 内置 immer 支持可变式状态修改
• 内置 thunk 更好的异步创建

② react-redux - 用来 链接 Redux 和 React组件 的中间件

2.2 配置基础环境

① 使用 CRA 快速创建 React 项目

• npx create-react-app react-redux

② 安装配套工具

• npm i @reduxjs/toolkit react-redux

③ 启动项目

• npm run start

2.3 store目录结构设计

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

3. Redux与React - 实现counter

3.1 整体路径熟悉

3.2 使用React Toolkit 创建 counterStore

① counterStore.js 子仓库

• counterStore.js 子仓库的创建

• 导出子仓库中修改数据的 reducer（根据 action 的描述生成一个新的 state）和 action （type 用来描述如何修改数据）

② store/index.js 总仓库

• 安装总仓库（configureStore）
• 创建总仓库
• 导入子仓库的 reducer （根据 action 的描述，生成新的 state）
• 在总仓库的 reducer 中组合 子仓库的 reducer
• 导出总仓库

3.3 为React注入store

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

• index.js 项目如口文件

3.4 React组件使用store中的数据

在 React 组件中使用 store 中的数据，需要用到一个 钩子函数 - useSelector， 它的作用是把 store中的数据映射到组件中，在 App.js 根组件中的使用样例如下：

• 通过 state.counter 拿到 counter 子模块

3.5 React组件修改store中的数据

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

3.6 总结

• 组件中使用哪个hook函数获取store中的数据？
  • useSelector
• 组件中使用哪个hook函数获取dispatch方法？
  • useDispatch
• 如何得到要提交action对象？
  • 执行store模块中导出的actionCreater方法

4. Redux与React - 提交action传参

4.1 需求说明

组件中有俩个按钮 `add to 10` 和 `add to 20` 可以直接把 count 值修改到对应的数字，目 标count值是在组件中传递过去的，需要在 提交action的时候传递参数

4.2 提交action传参实现需求

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

5. Redux与React - 异步状态操作

5.1 需求理解

5.2 异步操作样板代码

① 创建store的写法保持不变，配置好同步修改状态的方法

② 单独封装一个函数，在函数内部return一个新函数，在新函数中

• 封装异步请求获取数据
• 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交

③ 组件中dispatch的写法保持不变