使用 React Hooks 时应该如何调度操作？

Question

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

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)
}

来自 action.js 的 turnOnUserIsWrong 操作

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

})

减速器.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
        };     
}

}

Answer 1

不确定您是如何使用钩子检索状态的，但我目前正在使用仅使用钩子的 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;

不知道这对你有没有帮助，希望是。 如果不是，我希望你能找到你的答案！！