Javascript react-redux：理解提供者和代表性组件之间的通信

我很难理解全局存储应该如何与来自react组件的操作一起调度。我对整个概念非常陌生，我不会让我的组件在dispatch（）上重新渲染。我进行了深入的研究，发现尽管reducer返回更新的全局状态，但这些值并没有映射回组件props。但是定义了一个适当的函数（mapstatetops）

最小示例：（或下面的最小示例代码）

说明： 我有一个组件

控件

，其方法是

切换活动

。组件已连接到全局存储，并且“我的全局状态”在组件道具中可用

var PullFromStoreControls = function (state) {

  return {
    concrete: state.me.bool,
    nested:   state.me.nested.later
  }

}

var PushToStoreControls = function (dispatch) {
  return {
    switchFilter: function (type, value) {
      dispatch({
        type: 'SET_VAL',
        value: value
      })
    }
  }
}

Controls = connect(
  PullFromStoreControls, 
  PushToStoreControls
)(Controls)

我将变量

state.me.bool

连接到props.conrete，以避免深层状态树的副作用。我还连接了一个调度器，通过reducer更新全局状态。但是，如果“switchActivities”调用了dispatcher，则复选框的新值将正确地添加到reducer中，然后丢失。全局状态似乎从未正确更新

我错过了什么

index.html

---

您的问题是您正在变异

状态

。Redux的第二个原则是，

状态

不应直接变异-相反，您的reducer是一个纯函数，它应该

返回一个新状态：

你的问题在这里：

switch (action.type) {

    case 'SET_VAL':
      // you are attempting to mutate state.me.bool - this is an antipattern!
      state.me.bool = action.value;
      break;

}

相反，以返回
状态
的新副本的方式编写减速机

function reducer(state, action) {
    switch (action.type) {
        case 'SET_VAL':
            return {
              ...state,
              me : {
                ...state.me,
                bool: action.value
             }
           };
         default:
            return state;
    }
}

请注意，您需要为嵌套结构复制每个级别的
状态
。我在这里使用的是Object spread操作符，但是Object.assign（）包含所有工作。希望这有帮助
 我读了这么多次“变异状态”，但不知道如何真正防止这种情况。在文档中
记住返回新的状态对象，而不是改变以前的状态。
非常感谢，先生。你能把你的
…
写出来吗？我太蠢了，不懂…好吧，
…
是jsx语法；）但是你的符号给了我语法错误。
…
不是JSX特有的。这是ES6的一个特性：您收到的错误是什么？如果您没有ES6对对象扩展的支持，
..
将无法工作。好的，多亏了您，我才让它工作。但是您的代码包含语法错误。请稍微更正您的答案（请参阅我的更新）。@agoldev我已修复语法。如果这对你有用的话，你觉得这是正确的吗？
function reducer(state, action) {

  switch (action.type) {

    case 'SET_VAL':
      return {
        ...state,
        me : {
          ...state.me,
          bool: action.value
        }
      }
  }

  return state;

}

switch (action.type) {

    case 'SET_VAL':
      // you are attempting to mutate state.me.bool - this is an antipattern!
      state.me.bool = action.value;
      break;

}

function reducer(state, action) {
    switch (action.type) {
        case 'SET_VAL':
            return {
              ...state,
              me : {
                ...state.me,
                bool: action.value
             }
           };
         default:
            return state;
    }
}