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

【问题标题】：dispatch action triggering, but redux store not updating调度动作触发，但 redux 存储不更新
【发布时间】：2016-06-30 10:34:09
【问题描述】：

目前在我的 React-Redux 应用程序中，我想使用 React 将 show 的状态设置为 false 或 true。设置为 true 时，应用程序将初始化。（有多个组件，所以使用 react/redux 来做这件事是有意义的。）

但是，我当前的问题是，即使我使用 react redux 连接了我的应用程序，并且使用提供程序连接了我的商店，调度操作仍将被调用，而不更新商店（我正在使用 redux 开发工具进行仔细检查，因为以及在应用程序测试中）。

我附上了我认为相关的代码，但是，整个代码库可作为专门为此问题创建的分支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;
    } 
 }

谢谢，再次感谢您的帮助。

【问题讨论】：

标签： javascript reactjs redux reducers react-redux

【解决方案1】：

看起来state.show 设置为initialState，但在reducer 内部的任何情况下都没有修改。 action 有show: true，但是reducer 从来不使用它来更新状态。

这是一个简化的 reducer，它根据操作的 show 字段更新 state.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;
    } 
 }

【讨论】：

Kevan，如果您愿意包含代码 sn-p 来说明减速器的外观，以反映此评论，将不胜感激。谢谢你:)
编辑添加reducer sn-ps。
不幸的是，这并没有解决问题中的错误，即动作是对象而不是函数。
哎呀，动作创建者和动作之间的混淆再次出现。

【解决方案2】：

所以，我向一位同事寻求帮助，结果发现我将我的操作作为对象而不是函数返回。因此，例如，更改以下代码：

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

到

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

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

【讨论】：

是的，该操作是一个具有type 属性的对象，而不是一个函数。这就是为什么你可以创建更抽象/简洁的函数来制造 redux/flux 动作，重要的是你最后得到的动作。