如何在 createAsyncThunk 的 setTimeout 内分派操作？

Question

我正在学习如何使用createAsyncThunk。 我创建了一个简单的计数器应用程序。它有一个加和一个减按钮。单击这些按钮时，计数器值会相应增加或减少。

现在我想添加两个按钮，单击它们应该执行相同的增量和减量，但应该延迟一秒。

当我不使用 redux 工具包时，我也能实现相同的目标。以下链接包含代码https://stackblitz.com/edit/stackblitz-starters-vihbhq?file=src%2FApp.js

但我不确定如何使用 redux 工具包来实现相同的目的。 有人可以指导我如何编写 createAsyncThunk 调用和 extraReducers 来实现相同的目的吗？

下面是我尝试过的 stackblitz 代码。 https://stackblitz.com/edit/stackblitz-starters-9d4fxl?file=src%2FCounter.js,src%2Fstore.js,src%2FcounterSlice2.js

我不确定如何继续进行 createAsyncThunk 调用。我尝试在 createAsync 回调中分派操作，但它不起作用。

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

export const asyncAdd = createAsyncThunk('asyncAdd', async (_, thunkAPI) => {
 

});
const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
    hasError: false,
    isLoading: false,
    users: {},
    todos: {},
  },
  reducers: {
    add: (state, action) => {
      state.count += action.payload;
    },
    sub: (state) => {
      state.count -= 1;
    },
  },
  extraReducers: {
    [asyncAdd.pending]: (state, action) => {
      state.hasError = false;
      state.isLoading = true;
      console.log('PENDING');
    },
    [asyncAdd.fulfilled]: (state, action) => {
      state.hasError = false;
      state.isLoading = false;
      console.log('payload ' + action.payload);
      state.count = action.payload;
      console.log('FULILLED');
    },
    [asyncAdd.rejected]: (state, action) => {
      state.hasError = true;
      state.isLoading = false;
      console.log('REJECTED');
    },
  },
});

export const { add, sub } = counterSlice.actions;
export default counterSlice.reducer;

Answer 1

createAsyncThunk

旨在使用

promises

处理一些后期操作，您必须返回

promise

或已解决的承诺值。

使用

builder

中的

extraReducers

对象创建待处理、拒绝和已完成的案例

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

//method one using inbuild await
export const asyncAdd = createAsyncThunk('aextraReducerssyncAdd', (count) => {

  return new Promise((res) => { // return a promise that resolves after one second
    setTimeout(res, 1000, count); 
  });
});

//method two using await
export const asyncAdd2 = createAsyncThunk('asyncAdd',async (count) => {

  const res = await new Promise((res) => { // return a promise that resolves after one second
    setTimeout(res, 1000, count); 
  });
  return res;
});

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0,
    hasError: false,
    isLoading: false,
    users: {},
    todos: {},
  },
  reducers: {
    add: (state, action) => {
      state.count += action.payload;
    },
    sub: (state) => {
      state.count -= 1;
    },
  },
  extraReducers(builder) { //use builer
    builder.addCase(asyncAdd.fulfilled, function (state, { payload }) {
      state.count += payload;
    }).addCase(asyncAdd.pending,function (state) {
      state.isLoading = true;
    }).addCase(asyncAdd.rejected,function (state) {
      state.hasError = true;
    });
  },
});

export const { add, sub } = counterSlice.actions;
export default counterSlice.reducer;

我也分叉了 stackbliz