redux教程，如何使用extraReducers监控createAction函数？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

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

基础代码

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

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

• https://newsn.net/say/redux-slice-2.html
• https://newsn.net/say/redux-createasyncthunk.html
• https://newsn.net/say/redux-createasyncthunk-addcase.html

一对儿夫妻wife和husband，使用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()行为是儿子的自主行为，无法取得state和dispatch或者payload的任何联系。也就是说在的async里面，无法修改state也无法return数据。（createAsyncThunk是可以return数据的。）

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;

父亲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;

监听结果

注意：

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

相关文档

• https://newsn.net/say/redux-slice-2.html
• https://newsn.net/say/redux-createasyncthunk.html
• https://newsn.net/say/redux-createasyncthunk-addcase.html

综述

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

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

• https://newsn.net/tag/redux/

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