在Redux reducer中设置深度嵌套对象，不将更新传播到我的组件

Question

我试图通过一个reducer在我的react.js/redux应用程序中设置一个深度嵌套的对象，但是对象更改并没有传播到我的组件中。我应该如何更新和mapStateToProps这样的对象？

我已经尝试了…在我的reducer中添加我的操作的有效负载，在mapStateToProps中映射一个更高级别的对象，并将我映射到组件道具的对象扁平化。

我的初始状态：

const initialState = {
    myObject : {
        prop1 : {
            prop2 : {
                array1 : [],
                array2: [],
                array3: []
            }
        }
    }
}

const app = (state = initialState, action) => {
  switch(action.type) {
    case SET_DATA:
      return {
        ...state,
        myObject: action.payload
      };
  } default:
      return state;
}

export default app;

class Component extends React.PureComponent() {
    render() {
        return (
            {
                JSON.stringify(this.props.componentObject)
            }
        );
    }
}

function mapStateToProps(state) {
    return {
        componentObject: state.myObject
    };
}

export default connect(mapStateToProps)(Component);

export function setData(newDeeplyNestedObject) {
  return {
    type: SET_DATA,
    payload: newDeeplyNestedObject
  };
}

结果是我的组件没有显示Redux的状态。似乎Redux没有检测到组件道具中的更改，因此没有更新组件。有谁能告诉我当一个深度嵌套的对象结构发生变化时，如何确保Redux向我的组件发送更新？

我知道Redux对更新做了一个肤浅的比较，但我觉得在我的reducer中使用json.parse（json.stringify（））不是正确的方向。

Answer 1

1）通过以下方式实现存储：从“redux”导入{createStore}；导出const store=createStore(app)//传入reducer名称

2）在mapStateToProps中，访问您的myObject状态，例如:函数mapStateToProps（state）{return{myObject:state.myObject}}；

3）绑定您的操作调度程序：

   import {bindActionCreators} from "redux";
   const mapDispatchToProps = dispatch =>(bindActionCreators({setData}, dispatch));
   //Now we can use the setData action creator as this.props.setData()

export default connect(mapStateToProps,mapDispatchToProps)(Component);

5）假设您在INITIAL_STATE中定义了myObjects，例如：

    myObject : {
        prop1 : {
            prop2 : {
                array1 : [{a:'1'},{b:'2'}],
                array2: [{q:'6'},{w:'4'}],
                array3: [{m:'9'},{n:'0'}]
            }
        }
    }
};

6）现在，您需要使用任何changeHandlers或按下按钮来启动操作函数setData，并传递您想作为参数添加的新对象。操作符)并追加要添加的新项。假设您想对onClick事件触发操作并更改array1值：

<input type="button" onClick={()=>this.props.setData({...this.props.myObject.prop1.prop2,array1:[{changedA:'21'},{changedB:'32'}]})}/>

这将触发该操作，并且只有array1将被更改。类似地，您可以对任何嵌套对象执行此操作。无论要做什么更改，都必须分散对象，然后追加新项