Question

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

我尝试过...在减速器中操作动作的有效载荷，在mapStateToProps中映射一个更高级别的对象，并将我映射到组件props的对象展平。

我的初始状态：

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没有检测到我的组件prop中的更改，因此没有更新Component。有人能告诉我如何确保当深度嵌套的对象结构发生更改时Redux将更新发送到我的组件吗？

我知道Redux对更新进行了浅层比较，但是我觉得我的化简器中的JSON.parse（JSON.stringify（））在这里不是正确的方向。

Answer 1

1）通过以下方式建立商店： import {createStore} from "redux"; export const store = createStore(app) // you pass in your reducer name

2）在mapStateToProps中，访问myObject状态，如下所示： function 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()

4）同时使用mapStateToProps和mapDispatchToProps并将其连接到组件：

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，并传递要添加为参数的newObject。想法是散布对象（使用 ...运算符）并追加要添加的新项目。假设您想对onClick事件触发操作并更改array1值：

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

这将触发操作，并且只更改array1。同样，您可以对任何嵌套对象执行操作。 无论您想做什么更改，都必须先展开对象，然后附加新项

PS：还将回车符括在标签中。

在Redux Reducer中设置深度嵌套的对象不会传播对组件的更新

1 个答案: