前言

到目前为止，笔者一直都是用Vue框架开发项目，由于最近参加了字节青训营嘛，课程中学习的框架是React,索性跟着老师来学习一下React,写了这样一篇笔记，如果有和我一样一直在用Vue而没有接触过React的同学欢迎来阅读哇~👏

Redux

Redux是什么？

Redux是一个全局状态管理中心，里面保存了状态和状态的管理逻辑 随着组件的逻辑越来越复杂，我们需要专门引入一层来做状态管理相关的事情，Redux就是这样的一层，类似于Vuex。 看下面这个例子：

通过点击事件触发状态的更新。

Redux中的数据流

Redux会把Action和State这两部分的工作负责起来，组件需要修改State的时候可以调用Redux中提供的Action,通过Action更改State。

什么时候使用Redux？

当应用足够大，较复杂的时候需要共享状态或者组件需要频繁进行状态共享适合用Redux。

Redux中的术语

Store：存储全局状态

Action：描述状态发生的变化

Dispatch：发送一个Action

Reducer

根据当前应用状态，和接受的action，计算新的状态。

Redux更新状态的具体流程可见下面动图：

Redux Toolkit(RTK)

RTK是基于Redux的上层封装库，基于常见业务场景，提供了更加简洁的API，简化Redux的使用复杂度。

创建store

创建slice

一个slice模块，包含了管理一个子状态所需的所有逻辑（state、actions、reducer等）

slice实例

reducer必须是纯函数

slice使用

获取state

修改state

store中的状态放在哪里？

抽象带来的复杂度和收益不成正比：

1. 原本可以直接使用的API数据结构需要额外经过2层转换
2. JS模拟数据库表管理的复杂性，并没有真正的数据库工具做管理

服务端 状态

大部分场景下，API数据是不需要进行扁平化处理的。服务端数据的同步问题，应该交由服务端处理，而不是在前端重复后端工作。API数据的缓存问题，应该由专门的解决方案解决。

其他状态管理方案

• RTK Query
• Recoil
• Context + Hooks

最后

⚽本文介绍了redux的概念和使用及相关知识~

⚾如果你对这篇文章感兴趣欢迎点赞关注+收藏，更多精彩知识正在等你！😘