Question

React的新手。我是第一次尝试React Redux（我自己）。我有一个状态称为game_hidden的游戏板，我想在App.js中进行设置，然后在子组件中使用（降低了几层）。我使用redux创建forceGameBoardHidden，该值应将force_hidden设置为（）中的任何值。因此，forceGameBoardHidden（true）应该将force_hidden的状态设置为true。但是，这不会发生。我可以单击该项目，它记录为“更改之前”，然后记录状态。在它们之间应该将状态设置为true，但是状态仍然为false。我不知道这里出了什么问题。我尝试了console.loging 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钩子

此处示例：

trigger

React-Redux状态不会更新onClick

1 个答案: