Question

目前在我的React-Redux应用程序中，我想使用React将show的状态设置为false或true。设置为true时，应用程序将初始化。（有多个组件，因此使用react / redux执行此操作是有意义的。）

然而，我目前的问题是，即使我使用react redux和我的商店使用提供程序连接我的应用程序，也会调用调度操作，而不更新商店（我使用redux dev工具进行双重检查，如以及在app测试中）。

我附上了我认为相关的代码，但是，整个代码库可以作为专门为此问题here制作的分支。我花了相当长的时间（实际上是轻描淡写），任何贡献都将非常感激。

组件相关代码

hideBlock(){
const{dispatch} = this.props;
dispatch(hideBlock);
}

return(
  <div className = "works">
    <button id="show-block" type="button" className="show-hide-button" onClick={this.showBlock}>show</button>
    <button id="hide-block" type="button" className="show-hide-button" onClick={this.hideBlock}>Hide</button>
  </div>
);

function mapStateToProps(state) {
  const {environment} = state;
  return{
    environment
  }
}

export default connect(mapStateToProps)(Form);

动作

import * as types from "../constants/ActionTypes";

export function showBlock(show) {
   return {
      type: types.SHOW,
      show: true
   };
}

export function hideBlock(hide) {
   return {
      type: types.HIDE,
      show: false
   };
}

减速

import * as types from "../constants/ActionTypes";

const initialState = {
   show: false
};

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
          return Object.assign({}, state, {
              type: types.HIDE
          });
      case types.SHOW:
          return Object.assign({}, state, {
              type: types.SHOW
          });
      default:
          return state;
    } 
 }

谢谢你，再次感谢任何帮助。

Answer 1

所以，我向一位同事求助，事实证明我将我的行动作为一个对象而不是一个函数返回。因此，例如，更改以下代码：

hideBlock(){
  const{dispatch} = this.props;
  dispatch(hideBlock);
}

到

hideBlock(){
  const{dispatch} = this.props;
  //change hideBlock to hideBlock()
  dispatch(hideBlock());
}

解决了这个问题。谢谢安德鲁！

Answer 2

看起来state.show在initialState中设置但从未在reducer内的任何情况下进行修改。该操作有show: true，但reducer从不使用它来更新状态。

这是一个简化的reducer，根据操作的state.show字段更新show：

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
      case types.SHOW:
          return Object.assign({}, state, {
              show: action.show
          });
      default:
          return state;
    } 
 }

或者，由于action.show和action.type具有相同的数据，您可以从操作中删除show并依赖于操作类型：

export default function environment(state = initialState, action) {
   switch(action.type) {
      case types.HIDE:
          return Object.assign({}, state, {
              show: false
          });
      case types.SHOW:
          return Object.assign({}, state, {
              show: true
          });
      default:
          return state;
    } 
 }

调度动作触发，但redux存储不更新

2 个答案: