Javascript 使用React钩子时，我应该如何分派操作？

我正在重构React应用程序以使用钩子，并取得了一些成功，但我认为我在应用程序中错误地分配了操作（使用useReducer）。我发现，在使用钩子时，状态不会立即改变，这导致我的应用程序的行为与基于类的应用程序不同。下面是我的一段代码，用于分派使用console.logs查看状态是否已更改的状态。在将state.gameOver记录到控制台的两种情况下，它都是false，state.userisError也是false。我也把他们的行动附在我的减速机上。提前感谢您的帮助

const wrongAnswer = () => {
  dispatch(toggleGameOver());
  console.log(`game over1 ` + state.gameOver)
  console.log('wrong answer')
  sounds["wrong"].play();

  //a delay is used to so that the header will return back to "Click me to begin game" or the current level of the game
  //and to return the background to normal
  setTimeout(() => {
    dispatch(toggleGameOver());
    console.log(`game over2` + state.gameOver)
    dispatch(turnOnUserIsWrong());
  },500)
}

TurnOnUserSwing操作来自action.js

export const turnOnUserIsWrong = () => ({
type: 'TURN_ON_USER_IS_WRONG'

})

reducer.js

export default (state, action) => {
switch (action.type) {
    case 'SET_ACTIVE_STYLE':
        return {
            ...state,
            activeStyle: action.style
        }
    case 'UPDATE_LAST_COLOR':
        return {
            ...state,
            lastColor: action.color
        }
    case 'UPDATE_USER_PATTERN':
        return {
            ...state,
            userPattern: [...state.userPattern, action.id]
        }
    case 'UPDATE_GAME_PATTERN':
        return {
            ...state,
            gamePattern: [...action.newGamePattern]
        }
    case 'TOGGLE_PRESSED':
        console.log(action.color)
        return {
            ...state,
            pressed: action.color
        }
    case 'TURN_ON_READY_FOR_USER_INPUT':
        console.log(`here`)
        return {
            ...state,
            readyForUserInput: true
        }
    case 'TURN_OFF_READY_FOR_USER_INPUT':
        return {
            ...state,
            readyForUserInput: false
        }
    case 'RESET_GAME':
        return {
            ...state,
            gamePattern: [],
            userPattern: [],
            lastColor: "",
            level: 0,
            gameStarted: false,
            userIsWrong: false,
            readyForUserInput: false,
            activeStyle: '',
            strictRestart: false
        }
    case 'UPDATE_LEVEL':
        return {
            ...state,
            level: state.level + action.level
        }
    case 'TURN_OFF_USER_IS_WRONG':
        return{
            ...state,
            userIsWrong: false
        }
    case 'TURN_ON_USER_IS_WRONG':
            return{
                ...state,
                userIsWrong: true
            }
    case 'TOGGLE_STRICT_MODE':
        return {
            ...state,
            strictMode: !state.strictMode
        }
    case 'TOGGLE_GAME_STARTED':
        return {
            ...state,
            gameStarted: !state.gameStarted
        }
    case 'TOGGLE_GAME_OVER':
        return {
            ...state,
            gameOver: !state.gameOver
        }
    case 'EMPTY_USER_PATTERN':
        return {
            ...state,
            userPattern: []
        }
    case 'SET_PLAYER_LEVEL':
        return{
            ...state,
            level: action.level
        }
    default:
        return {
            ...state
        };     
}

---

}

不确定如何使用钩子检索您的状态，但我目前正在使用仅使用钩子的React应用程序，我将给您留下一个示例，希望它能帮助您：

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

//YOUR OTHER IMPORTS

const YOURCOMPONENTNAME = (props) => {
   const gameOver = useSelector((state) => state.YOURREDUCERNAME.gameOver);

   const dispatch = useDispatch();
   const onToggleGameOver = () => dispatch(toggleGameOver());
   const onTurnOnUserIsWrong = () => dispatch(turnOnUserIsWrong());

   const wrongAnswer = () => {
      onToggleGameOver();
      console.log(`game over1 ` + gameOver)
      console.log('wrong answer')
      sounds["wrong"].play();

      //a delay is used to so that the header will return back to "Click me to begin 
      //game" or the current level of the game and to return the background to normal
      setTimeout(() => {
          onToggleGameOver();
          console.log(`game over2` + gameOver)
          onTurnOnUserIsWrong();
      },500)
   }

   // MORE CODE
}

export default YOURCOMPONENTNAME;

不确定这对你是否有帮助，希望有帮助。如果不是，我希望你能找到你的答案