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的相关知识，如有不足，请多指正！！！