React-Redux 状态不会更新 onClick

Question

React 新手。我第一次尝试 react redux（我自己）。我有一个名为 force_hidden 的游戏板的状态，我想在 App.js 中设置它，然后在子组件中使用（向下几级）。我使用 redux 创建了 forceGameBoardHidden，它应该将 force_hidden 设置为 () 中的任何值。因此，forceGameBoardHidden(true) 应该将 force_hidden 的状态设置为 true。然而，这不会发生。我可以单击该项目，它会记录“更改前”，然后是状态。在这之间它应该将状态设置为真，但状态仍然是假的。我不知道这里出了什么问题。我试过 console.logging gameBoardReducer。它在我启动页面时触发，但在我单击按钮时不会触发。

gameboard.types.js

const GameBoardActionTypes = {
  FORCE_GAMEBOARD_HIDDEN: 'FORCE_GAMEBOARD_HIDDEN'
}
export default GameBoardActionTypes;

gameboard.action.js

import GameBoardActionTypes from './game-board.types';
export const forceGameBoardHidden = value => ({
  type: GameBoardActionTypes.FORCE_GAMEBOARD_HIDDEN,
  payload: value
});

gameboard.reducer.js

import GameBoardActionTypes from './game-board.types'
const INITIAL_STATE = {
  force_hidden: false
}
const gameBoardReducer = ( state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GameBoardActionTypes.FORCE_GAMEBOARD_HIDDEN:
      return {
        ...state,
        force_hidden: action.payload
      }
    default:
      return state;
  }
}
export default gameBoardReducer;

根减速器

import { combineReducers } from 'redux';
import gameBoardReducer from './game-board/game-board.reducer'
export default combineReducers ({
  gameboard: gameBoardReducer
})

store.js

const middlewares = [];
const store = createStore(rootReducer, applyMiddleware(...middlewares))
export default store;

index.js

<Provider store={store}>

App.js -- 这就是 forceGameBoardHidden 中的神奇之处

const App = () => {
  const handleKeyChange = event => {
    setKey(event.target.value);
    console.log("before change")
    forceGameBoardHidden(true)
    console.log(store.getState().gameboard)
  }
  return (
      <SearchBox 
          onChange={handleKeyChange}
          placeholder="Enter your game Key"/>
    </div>
  );
}

const mapDispatchToProps = dispatch => ({
  forceGameBoardHidden: item => dispatch(forceGameBoardHidden(item))
})

export default connect(null,mapDispatchToProps)(App);

Answer 1

我认为你需要调度动作，有两种方法，一种是将组件连接到动作并将它们绑定到调度。另一个更容易，因为您使用功能组件，是使用 useDispatch 钩子

这里的例子：

import { useDispatch } from 'react-redux' // <-- add this 

const App = () => {

    const dispatch = useDispatch() // <-- add this 

  const handleKeyChange = event => {
    setKey(event.target.value);
    console.log("before change")
    dispatch(forceGameBoardHidden(true)) // <-- change this
    console.log(store.getState().gameboard)
  }
  return (
      <SearchBox 
          onChange={handleKeyChange}
          placeholder="Enter your game Key"/>
    </div>
  );
}