我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

redux的createAction()函数,和createAsyncThunk创建的action,有什么区别?如何使用extraReducers监控这些action呢?这就是本文中在讨论的问题。

苏南大叔:redux教程,如何使用extraReducers监控createAction函数? - createaction-extraresources
redux教程,如何使用extraReducers监控createAction函数?(图4-1)

大家好,这里是京城互联网非著名从业人员苏南大叔的技术博客,随便写点代码相关的事情。本文来看看redux中的createAction()的使用方法。测试环境:win10node@16.14.2create-react-app@5.0.1reduxjs/toolkit@1.8.3react-redux@8.0.2chrome@103.0.5060.53redux-devtools-extension@3.0.11

基础代码

createSlice.js可以创建多个slice,每个slice可以放置独立逻辑,也可以通过extraReducers对其它slice或者action进行监控,这些action包括createAsyncThunk()也包括createAction()

需求用例上,还是沿用上一个例子。参考文章:

一对儿夫妻wifehusband,使用createSlice()来具象化。现在他们有了一个儿子,儿子目前没有自己的createSlice(),定义有两个动作,一个是play toy,另外一个是buy toy

import { createSlice,createAction } from '@reduxjs/toolkit';
import { fetchCount } from './api';
export const play_toy = createAction("son/play");
export const buy_toy = createAction("son/buy", async (money) => {
  const response = await fetchCount(money);
  return response.data;
});

这里的buy_toy()行为是儿子的自主行为,无法取得statedispatch或者payload的任何联系。也就是说在的async里面,无法修改state也无法return数据。(createAsyncThunk是可以return数据的。)

苏南大叔:redux教程,如何使用extraReducers监控createAction函数? - createaction-code
redux教程,如何使用extraReducers监控createAction函数?(图4-2)

createAction()里面的函数,必须是个promise()。可以只定义一个type,供extraReducers监控使用。具体的函数逻辑可以不定义留空。

extraReducers监控

父亲和母亲都可以监控到儿子的买玩具的行为,但是它们无法对其行为进行干涉。只能根据情况,默默的付款。(对自己的属性进行调整,修改自己的state)。

母亲slice.js

import { createSlice,createAction } from '@reduxjs/toolkit';
export const wife = createSlice({
  name: 'wife',
  initialState :{
    point:10000,
  },
  reducers: {
  },
  extraReducers: (builder) => {
    builder
      .addCase("son/play", (state) => {
        state.point +=1 ;
        console.log("mom happy");
      })
      .addCase("son/buy", (state) => {
        state.point += 66 ;
        console.log("mom pay");
      });
  }
});
export const reducer_1 = wife.reducer;
export const { need } = wife.actions;

苏南大叔:redux教程,如何使用extraReducers监控createAction函数? - 添加监控addcase
redux教程,如何使用extraReducers监控createAction函数?(图4-3)

父亲slice2.js:

import { createSlice } from '@reduxjs/toolkit';
export const husband = createSlice({
  name: 'husband',
  initialState :{
    // have: [],
    money:1,
  },
  reducers: {
  },
  extraReducers: (builder) => {
    builder
      .addCase("son/play", (state) => {
        state.money = 100;
        console.log("daddy tired");
      })
      .addCase("son/buy", (state,action) => {
        state.money = 50;
        console.log("daddy no money",action);
      });
  },
});
export const reducer_2 = husband.reducer;
export const { need2 } = husband.actions;

监听结果

苏南大叔:redux教程,如何使用extraReducers监控createAction函数? - 最终结果截图
redux教程,如何使用extraReducers监控createAction函数?(图4-4)

注意:

  • createActiontype字符串的写法,无/fulfilled/ejected或者/pending的附加写法。
  • 两个slice,都是通过type字符串进行监控的。所以,并没有对儿子相关定义的任何.js的引用行为。
  • 对比createAsyncThunkcreateAction无法产生三种状态变化,也无法和state或者dispatch等产生联系。

相关文档

综述

本文描述了createAction,可以仅仅定义type,也可以顺便定义async函数。在slice里面可以通过extraReducers对已经定义好的type字符串进行监听。如果想要获得返回值,或者监听状态变化等等,就使用createAsyncThunk()

更多redux的经验文章,请点击苏南大叔的博客:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   redux