如何使用 redux 工具包中的中间件？

Question

我在 redux 工具包中使用切片。 在 slice 的一个动作中，我有从其他动作复制的代码，因为在动作中你不能调用另一个动作。

我想把checkWinner这个action的逻辑全部放到中间件里面，但是在configureStore. 在checkWinner我需要实际的 state。

而且，我可能不完全了解如何创建这样的中间件。

这是我的切片：

const gameSlice = createSlice({
    name: 'game',
    initialState: {
        roundEnd: null,
        ...
    },
    reducers: {
        setRoundEnd: (state, action) => {
            state.roundEnd = action.payload;
        },
        setWinner: (state, action) => {
            if (action.payload.winner === 'computer') {
                state.score.computer += 1;

                state.usedCells.splice(
                    state.usedCells.indexOf(state.winCell),
                    1,
                    -state.winCell
                );
            } 
            
            if (action.payload.winner === 'player') {
                state.score.player += 1;
            }
        },
        checkWinner: (state) => {
            if (state.roundEnd === null || state.roundEnd) {
                state.roundEnd = false;
            } else {
                state.score.computer += 1;

                state.usedCells.splice(
                    state.usedCells.indexOf(state.winCell),
                    1,
                    -state.winCell
                );
            }
        }
    }
}

我在店里试过：

export const checkWinner = () => (dispatch, getState) => {
    const { roundEnd } = getState(); 

    if (roundEnd === null || roundEnd) {
        dispatch(setRoundEnd(false));
    } else {
        dispatch(setWinner('computer'));
    }
}

export const store = configureStore({
    reducer: {game: gameSlice},
    middleware: getDefaultMiddleware => getDefaultMiddleware().concat(checkWinner)
});

但它不起作用。 错误： getSTate不是 function。

Answer 1

你的中间件写错了。 正确的签名是：

// Outer function: gets {dispatch, getState}
const SomeMiddleware = (storeApi) => {
  // Middle function: gets the "next" middleware in the pipeline
  return (next) => {
    // Inner function: gets the current action
    return (action) => {
      return next(action);
    }
  }
}

此外，您的getState调用是错误的，因为您正在尝试读取state.roundEnd 。 然而， roundEnd字段是 state game片段的一部分，所以它实际上应该是state.game.roundEnd 。