react数据集中式管理第二篇--@reduxjs/toolkit

上一篇介绍了redux的基本知识点，今天一起来学习下@reduxjs/toolkit。

其他几篇：

react数据集中式管理第一篇–Redux初认识

react数据集中式管理第三篇–redux-saga

react数据集中式管理第四篇–@rematch/core

什么是@reduxjs/toolkit

@reduxjs/toolkit 就是redux的一个工具包，它想编写Redux逻辑的标准方式，想解决配置Redux存储太复杂的问题；

先放上我的项目部分目录结构：

\

---

下面一起学习@reduxjs/toolkit中的createAction、counterReducer、createSlice

主角之一：createAction：

之前我们要写一个action时，要自己写 const action = {type: xxx,  payload:  xxx}; 如果action一多起来每次都要写什么type，payload就会很繁琐；这时候createAction就发挥它的作用；

createAction：返回给定action type 字符串的 action creator 函数，该函数本身已定义了 toString() ,因此可以代替常量类型使用；

注意：createAction返回的是一个函数，那么这个函数的参数就是payload的值，上代码：console.log(“getAgentUserAction”, getAgentUserAction({})); // {type: “posts/update”, payload: {}}

// store/modules/action.js 存放所有的createAction 
import {
    createAction } from "@reduxjs/toolkit";

export const getAgentUserAction = createAction("posts/update"); 
// 返回给定 action type 字符串的 action creator 函数，该函数本身已定义了 toString()，因此可以代替常量类型使用 
console.log("getAgentUserAction", getAgentUserAction({
   })