使用React挂钩时应如何调度操作

Question

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

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

turnOnUserIsaction.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
};     
}

}

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;

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