如何从一个redux toolkit动作中调用另一个动作

jckbn6z7  于 2023-06-23  发布在  其他
关注(0)|答案(1)|浏览(153)
const scoreSlice = createSlice({
  name: 'score',
  initialState,
  reducers: {
    addScore: ({ score }, action) => {
      score += action.payload;
    },
    reset: (state) => {
      state.score = 0;
      state.grid = initialState.grid;
      generateCard(2); // How do we do this?
    },
    generateCard: (state, action: PayloadAction<number>) => {

    },
  },
});

我创建了一个scoreSliceslice,并创建了3个操作:addScoreresetgenerateCard
当我执行reset操作时,我希望generateCard操作也能工作。我该怎么做?

x6492ojm

x6492ojm1#

是的,调度多个操作是一种常见的做法。

  • 选项1.将操作直接分派到事件处理程序。
const handler = () => {
  dispatch(reset());
  dispatch(generateCard(2))
}
  • 选项2.创建一个形实转换程序来组合相关的操作(需要redux-thunk中间件)
const resetAndGenerateCard = (cardNumber) => {
  return (dispatch) => {
    dispatch(reset());
    dispatch(generateCard(cardNumber))
  }
};

const handler = () => dispatch(resetAndGenerateCard(cardNumber))
  • 选项3.创建一个新的特殊操作,将这两种操作类型组合起来,并在一个特殊的reducer中处理它。(“特殊”并不是真的特殊,它只是需要你想一个动作类型来表示这个动作的含义。action1AndAction2可能不是好的操作类型)
const resetAndGenerateCard = (payload) => ({ type: 'RESET_AND_GENERATE_CARD', payload });
// ...
{ 
  resetAndGenerateCardReducer: (state, action) => {
    // reset
    state.score = 0;
    state.grid = initialState.grid;
    // generate card 
    state.cards = [...state.cards, action.payload];
  }
}
// ...

const handler = () => dispatch(resetAndGenerateCard(2))

但有时也有取舍。看一看我是否应该从一个动作创建者在一行中分派多个动作?

相关问题