时间戳

首页 > 解决方案 > redux 在商店更新时没有调用 mapStateToProps

reactjs - redux 在商店更新时没有调用 mapStateToProps

问题描述

push更新状态时不要使用。利用concat

我正面临这个非常奇怪的问题，考虑这个减速器：

export default function(state = null, action) {

  console.log("Current State: ",state);
  // on performing actions, it gives me:
  // Current State: null
  // Current State: Array [{}]
  // Current State: Array [{}] -- all good

  if(state === null) {
      state = [
          {id: 1, title: "Java"}
      ];
  }

  // UPDATED PART. FORGOT TO MENTION IT BEFORE
  if(Action.type == "UPDATE_LIST") {
     state.push( Action.payload ); // don't do that, this'll mutate your array and states are immutable
  }
  /////////////

  return state; // this is the main problem
}

上面的代码不会mapStateToProps在我的组件内部调用。但是，像下面这样修改上述减速器确实会调用mapStateToProps：

return []; // instead of return state;

或者

return [ {id: 1, title: "Python"} ]; // instead of return state;

我在两种情况下都返回 instanceof Array [ state & [] ]，但只有后一种情况mapStateToProps在我的组件中调用。

这很奇怪，我不知道我该怎么做才能解决这个问题。

标签： reactjsreduxreact-redux

解决方案

redux 的重点是确保您的状态不是直接可变的。由于数组和对象在 Javascript 中通过引用传递，因此您的代码试图直接改变状态对象..这是不正确的。

总是通过返回新状态来改变状态。像这样：

export default function(state = null, action) {
  let newState = [...state];
  if(state === null) {
      newstate = [
          {id: 1, title: "Java"}
      ];
  }

  return newState;
}

推荐阅读