Redux和react-redux和@reduxjs/toolkit

这篇我要分享的内容是关于Redux和@reduxjs/toolkit的知识，希望能让大家通过我这篇文章，能更好的对redux有一个更深入的了解！！！

1. Redux

1. 什么是Redux

        Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理

        Redux 可以与 React 或其他视图库一起使用，使用原生 JS 编写。并不依赖于 React

        Redux用一个单独的常量状态树（ state 对象）保存这一整个应用的状态，这个对象不能直接

        被改变。当一些数据变化了，一个新的对象就会被创建

2. Redux的使用原则

        state以单一对象存储在 store 对象中

        state是只读的（每次都返回一个新的对象）

        使用纯函数reducer 执行 state 更新

了解redux之前我们先来了解一个概念叫做纯函数，那么什么是纯函数呢？

3. Redux的工作流

组件通过 dispatch 发起更新请求： dispatch(action)

Reducer 接收请求

Reducer 更新 store 中所保存的 state 数据

store 通知组件更新组件的状态

4. redux基本使用

引入 createStore ，创建 store 对象

编写 reducer 函数，修改 stroe 中的 state 数据

组件通过 dispatch 方法提交 action 给 reducer

组件调用 getState 方法来渲染数据

通过 subscribe 方法来监听数据的变化，调用 setState 方法触发 render 重新渲染

5. 合并 reducer

如果我们在一个 reducer 中管理多个状态的话，这样会很影响性能。也不便于我们维护，所以

我们需要对 reducer 拆分在进行合并

2.什么是react-redux

官网： https://react-redux.js.org

介绍

        React Redux是 Redux 的官方 React UI 绑定层。它让您的 React 组件从 Redux 存储中读取数

        据，并将操作分派到存储以更新状态

        React Redux 由 Redux 团队维护，并 与来自 Redux 和 React 的最新 API 保持同步

        旨在与 React 的组件模型一起使用 。您定义如何从 Redux 中提取组件所需的值，并且组件

        会根据需要自动更新

        提供 API 使您的组件能够与 Redux 存储交互 ，因此您不必自己编写该逻辑

        自动实现复杂的性能优化 ，这样你自己的组件只有在它需要的数据实际发生变化时才会重新

        渲染

2. 为什么要使用react-redux

可以帮助我们订阅 store 、检查更新数据和触发组件的重新渲染。

3. 容器组件与UI组件

UI 组件

        只负责 UI 的呈现，不带有任何业务逻辑

        没有状态（即不使用this.state 这个变量）

        所有数据都由参数（this.props ）提供

        不使用任何 Redux 的 API

容器组件

        负责管理数据和业务逻辑，不负责 UI 的呈现

        带有内部状态

        使用 Redux 的 API

4. 基本使用

下载 react - redux 和 @reduxjs/toolkit

创建 store

创建切片

使用 react - redux 中的 Provider 组件包裹整个根组件，传递 store

在 components/Counter.js 中引入 connect 模块，用于从 UI 组件中生成容器组件

3. @reduxjs/toolkit

  1. 介绍

                Redux Toolkit包旨在成为编写Redux 逻辑的标准方式。它最初的创建是为了帮助解决关于Redux 的三个常见问题

                配置 Redux 存储太复杂了

                我必须添加很多包才能让 Redux 做任何有用的事情

                Redux 需要太多样板代码

                默认包含 redux- thunk ，并启用 Redux DevTools Extension

2. 基本使用

安装

创建 store 对象

创建 reducer 切片

通过 dispatch 方法传递 actions ，触发 reducer 并渲染

3.在组件中使用

        store/index.js

store/modules/counterSlice.js

store/modules/listSlice.js

components/Counter.js

components/List.js

App.js

index.js

简单来说就是，redux就是创建一个切片对象，在切片对象里定义数据和修改数据方法，然后抛出对象和方法，在store组件中是用来存储不同的切片对象，在组件中使用就是通过导入 useDispatch和useSelector这两个属性来进行数据的操作，其中useSelector是用来获取切片的数据吗，而dispatch是用来调用切片里的方法来进行数据的操作，redux一般运用在较复杂的项目中，使得数据状态保存的更持久！！！

下面我来介绍一下redux的一款调试工具叫做 redux-devtools

4. redux-devtools安装

1. 打开这个网址： https://github.com/reduxjs/redux-devtools

2. 进入下载页面

3. 下载压缩包

4. 进行下载

5. 在 chrome 浏览器中打开这个页面： chrome://extensions/

6. 解压之前的文件，将其拖拽到这个页面下

这个工具是用来更直观的查看redux中定义的数据，今天就是我要讲的关于redux的相关知识，如有不足，请多指正！！！