Как я должен отправлять действия при использовании 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)
}

turnOnUserIsНеправильное действие от действия. js

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 App, используя только хуки, я оставлю вам пример, который, я надеюсь, поможет вам:

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;

Не уверен, что это вам поможет, надеюсь, это так. В случае, если это не так, я надеюсь, что вы найдете свой ответ !!