Redux-Toolkit的学习

写在前面：

很多是我的一点读完toolkit的个人理解，也有一定困惑，非官方。
toolkit的文档是纯英文的，读起来比中文自然是费力许多的，有一定缺漏。
redux的末尾：https://cn.redux.js.org/redux-toolkit/overview/

Redux-toolkit文档：https://redux-toolkit.js.org/tutorials/typescript#define-slice-state-and-action-types

RTK是什么？

image.png

  1. # NPM
  2. npm add @reduxjs/toolkit
  3. npm add react-redux
  6. # Yarn
  7. yarn add @reduxjs/toolkit

react tookit主要解决了Redux的几个问题

  • “配置 Redux store 过于复杂”
  • “我必须添加很多中间件才能开始使用 Redux”
  • “Redux 有太多样板代码”

说白了，这个工具库是为了简化Redux的使用而生的，官方文档也说明了强烈推荐使用Redux-Toolkit
原始人进化成三体人了！！！

使用方法

configureStore

api的作用

理解为用来简化createStore和combineReducer的一个api，用来生成一个全局的状态存储仓库store，然后从其他包里导入定义的reducer配置进reducer对象即可。
image.png

标准的Redux store的配置

image.png
1.把所有的切片的reducercombine成一个总reducer
2.配置一些中间件middleware
3？.添加 Redux DevTools 增强器，并将增强器组合在一起
4.

挂载到总provider

然后挂载到整个文件的的store属性上即可。
示例如下：
image.png
引入configureStore生成的store仓库，随后挂载到总App.tsx文件的App组件里，写一个render函数，如下：
image.png

createSlice

image.png
createSlice是一个函数，接受一个对象作为参数，对象中传一个name字符串，传一个InitialState,以及reducers对象【该对象里是一个个小型的reducer】，记得reducer是传state和action的吧？这里reducers里的reducer也遵守这个规定，不过相比于redux里的reducer,toolkit里的reducer更强了~

官方：createSlice 为我们做了几件重要的事情：

  • 可以将 case reducer 编写为对象内部的函数，而不必编写 switch/case 语句
  • reducer 将能够编写更短的不可变更新逻辑
  • 所有 action creators 将根据我们提供的 reducer 函数自动生成

    话不多说，看用例

    1.官网示例
    image.png

reducers里的函数其实是自动返回了state
2.小程序节选一个reducer很多的reducers的slice
image.png

详细分析三个参数

1.name

没什么好说的，但是值得一提的是小程序统一用了大写加下划线，这是为什么捏

2.initialstate

设置了reducers里面的reducer的初始状态，需要注意，既然把reducer都集成在了同一个reducers里面，当然是有原因的，那就是所有的reducer，其实处理的都是同一批状态，

3.reducers对象

reducers里面包含了reducer，等效于传统redux写法的switch case链？（存疑）这里虽然形式上更像reducer(符合state+action=>new state的思想)，但是起名上更偏向于action的定义（即用户的操作去影响state）】、
官方说法：

  • reducers：一个对象，其中键是字符串，值是处理特定 actions 的 “case reducer” 函数

记得Reducers里的reducer要在该文件（小程序统一是store.ts）底部统一导出,然后导入到被注入了XXXSilce的组件里的方法里被执行this.store.dispatch(action)，去切实的更改了store里的状态，进一步影响了ui的渲染。

小程序是用了一个es6的装饰器写的class module，module继承xxxxx父类，（父类里做了很多初始化工作，数据初始化函数auto()，模块初始化函数init()，然后在子类模块内部重写，实现功能）
挂在了slice，module里实现逻辑处理，再把某某自定义module导入ui的最外层组件，让ui层与数据层完全实现解耦合🤙🏻

看导出的示例
image.png
image.png

image.png

###关于reducer里的第二个参数，action详解

我观察到小程序的reducers里的reducer一般传的是两个参数，第一个是state,这没什么奇怪的，第二个action似乎也很符合常理，但是传action的时候，往往下面会用到payload？？？这有点神奇

于是我找来了文档，原文怎么说？
image.png
划重点，All generated actions should be defined using the PayloadAction type from Redux Toolkit, which takes the type of the action.payload field as its generic argument.
所有的生成的action应该用toolkit提供的
PayLoadAction这个类型，这个生成的action creator会正确被定义类型以接受payload基于你传给<>泛型里的类型。

至于这个action的payload是哪来的？？？？？？？？
image.png
image.png
正常情况下，dispatch（action（…arg））接受一个参数，回到createSlice里的reducers里通过action.payload调用

Useselector

从redux库里挑选数据，前往具体组件页去处理数据
image.png

UseDispatch

为什么在toolkit里可以不用像之前那样，先展开state然后覆盖，而是可以直接改动了呢

事实上就是toolkit官方在createslice里封装了immer库，方便开发者使用去写immutable updates

image.png
这样你想要修改状态就很快捷了

处理异步