如何使用Redux Toolkit按时间间隔更新state并保证dispatch顺序执行？

实现方案 #

步骤1：补充 slice 导出配置 #

先把 slice 对应的 action 导出，方便后续调用：

const initialState = { 
    hand: [],
};

export const stateSlice = createSlice({
    name: 'black',
    initialState,
    reducers: {
        updateHand: (state, action) => {
            state.hand = [...state.hand, action.payload]
        }
    }
});

// 新增导出action
export const { updateHand } = stateSlice.actions;
export default stateSlice.reducer;

步骤2：创建带间隔逻辑的异步 thunk #

用createAsyncThunk实现轮询逻辑，天然满足「前一次dispatch完成再执行下一次」的要求，同时自带中断能力避免内存泄漏：

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

export const startHandInterval = createAsyncThunk(
  'black/startHandInterval',
  // 入参为每次要添加内容的生成函数，可自定义返回值逻辑
  async (getPayload, { dispatch, signal }) => {
    while (!signal.aborted) {
      // 先执行状态更新
      dispatch(updateHand(getPayload()));
      // 等待1秒后进入下一轮
      await new Promise(resolve => setTimeout(resolve, 1000));
    }
  }
);

步骤3：业务侧调用示例（以React组件为例） #

import { useDispatch } from 'react-redux';
import { startHandInterval } from './你的slice文件路径';
import { useEffect } from 'react';

function DemoComponent() {
  const dispatch = useDispatch();

  useEffect(() => {
    // 启动轮询，示例每次添加当前时间戳到hand数组
    const intervalTask = dispatch(startHandInterval(() => Date.now()));
    // 组件卸载时终止轮询
    return () => intervalTask.abort();
  }, [dispatch]);

  return <div>组件内容</div>
}

逻辑说明 #

• 执行顺序严格符合要求：只有上一次updateHanddispatch完成、1秒等待结束后才会触发下一次执行，不会出现并发调用
• 入参getPayload可自定义每次添加的内容，需要固定值直接返回对应值即可，比如() => '固定内容'
• 内置中断逻辑，调用intervalTask.abort()即可随时终止轮询，避免内存泄漏
• 如果需要自定义终止条件，直接在while判断中补充即可，比如添加&& state.hand.length < 10可以限制最多添加10条数据

内容的提问来源于stack exchange，提问作者Dag