如何在 React Redux 中渲染之前使用調度更新 state？

Question

我是使用 Redux 反應的初學者，我遇到了一個我不明白如何解決的問題。 我正在編寫一些簡單的蛇游戲。 當我按下某個鍵箭頭時，我希望蛇相應地移動。 但是渲染是在調度更新 state 之前發生的。

這是代碼：

function App1() {
    const dispatch = useDispatch()
    const init = useSelector(state => state.snake)

    useEffect(() => {
        checkIfOutOfBorders()
    }, [init])

    const onKeyDown = (e) => {
        console.log("_______________")
        e = e || window.event;
        switch (e.keyCode) {
          case 38:
            dispatch({
              type: "UP"
            });
            moveSnake()
            break;
          case 40:
            dispatch({
              type: "DOWN"
            });
            moveSnake()
            break;
          case 37:
            dispatch({
              type: "LEFT"
            });
            moveSnake()
            break;
          case 39:
            dispatch({
              type: "RIGHT"
            });
            moveSnake()
            break;
          default:
            break;
        }
    }
    

    const moveSnake = () => {
        let dots = [...init.snakeDots];
        let head = dots[dots.length - 1];
        let direction = init.direction
        switch (direction) {
          case 'RIGHT':
            console.log("into move", direction)
            head = [head[0] + 2, head[1]];
           break;
          case 'LEFT':
            console.log("into move", direction)
            head = [head[0] - 2, head[1]];
            break;
          case 'DOWN':
            console.log("into move", direction)
            head = [head[0], head[1] + 2];
            break;
          case 'UP':
            console.log("into move", direction)
            head = [head[0], head[1] - 2];
            break;
        default:
            break;
        }
        dots.push(head);
        dots.shift();
        dispatch({
          type:"MOVE_SNAKE",
          dots
        })
    }

這是減速器：

const initialState = {
    speed:200,
    direction: 'RIGHT',
    snakeDots: [
      [0,0],
      [2,0]
    ]
  }


export default function (state=initialState , action){
    const {type, payload} = action;
    //console.log("dots", action.dots)
    console.log("type", type)

    switch(type){
        case 'UP':
            console.log("up");
            return{
                ...state,
                direction:'UP'
            }
        case 'DOWN':
            console.log("down");
            return{
                ...state,
                direction:'DOWN'
        }
        case 'LEFT':
            console.log("left");
            return{
                ...state,
                direction:'LEFT'
            }
        case 'RIGHT':
            console.log("right");
            return{
                ...state,
                direction:'RIGHT'
            }
        case 'MOVE_SNAKE':
            return{
                ...state,
                snakeDots:action.dots    
            }
        case 'RESET':
            return{
                speed:200,
                direction: 'RIGHT',
                snakeDots: [
                  [0,0],
                  [2,0]
                ]
                
            }
        default:
            return state
    }
}

這是我按 RIGHT 然后 DOWN 后出現在控制台中的內容。 如您所見，在 dispatch 內部傳遞的是正確的鍵 (DOWN)，但是當執行 move_snake() 時，state 仍然包含 (RIGHT) 並且移動錯誤。 如何解決這個問題？

如果需要一些額外的信息，請告訴我。

Answer 1

我認為問題是減速器

 case 'MOVE_SNAKE':
        return{
            ...state,
            snakeDots:payload.dots  //action.dots   
        }