本文主要是介绍React学习笔记（三）——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的写法保持不变
这篇关于React学习笔记（三）——redux状态管理工具的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
