Redux的介绍和使用

什么是Redux?( useReducer)

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

作用：通过集中管理的方式管理应用的状态。

Redux快速体验

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

步骤：

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

如：

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

如：

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

如：

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

如：

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

如：

Rudux把整个数据修改的流程分成了三个核心概念，分别是：state、action、reducer

说明：

1. state：一个对象存放着我们管理的数据状态
2. action：一个对象用来描述你想怎么改数据
3. reducer：一个函数更具action的描述生成一个新的state

Redux与React环境准备

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

安装：npm i @reduxjs/toolkit react-redux

说明：

1. Redux Toolkit：官方推荐编写Redux逻辑的方式，是一套工具的集合，简化书写方式

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

1. React-redux：用来链接Redux和React组件的中间件

目录结构设计

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

案例代码

例如：modules>创建counterStore.js

counterStore.js

store>index.js

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

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

如：

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

如：src>index.js

提交action传参

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

如：

counterStore.js

src>index.js

异步操作

步骤：

1. 创建store的写法保持不变，配置好同步修改状态的方法
2. 单独封装一个函数，在函数内部return一个新函数，在新函数中

        2.1封装异步请求获取数据

        2.2调用同步setList()方法，传入异步生成的一个action对象，并使用dispatch()提交

     3.组件中dispatch()的写法保持不变

如：

封装的异步方法