我有一个Redux工作正常,直到我规范化数据,现在我有2个数组作为存储。
写下另一个减速器,将它们组合在一起。
当我发送一个Action时,Reducers工作正常并返回正确的新值。
Store is updatet,Child Compnents中的Props以及App Container Component中的Props也是updatet。 但是组件不识别Prop更改。(他们不会进入willReceiveProps)
但是在google Chrome的react-developer工具中,值是正确的。
我的减速机:
`export default handleActions<any, NodeModel>({
[ADD_NODE]: (state: any, action: Action<NodeModel>): any => {
let result = [...state, action.payload];
return result;
},
[MOVE_NODE]: (state: any, action: Action<NodeModel>): any => {
let result = assign(state)
Object.keys(result).map((n: any) => {
result[n].id == action.payload.id ?
result[n] = action.payload : result[n] = result[n]
})
return result;
}
},normalizedStoreData.entities.Nodes);`
我的行动:
export const addNode = createAction<NodeModel, NodeModel>(
ADD_NODE,
(node : NodeModel) => node
);
export const moveNode = createAction<NodeModel, NodeModel, number>(
MOVE_NODE,
(node : NodeModel, newParentId : number) => {
let result : NodeModel = assign(node, { ParentId : newParentId})
return result;
}
);
App.tsx(App Container):
createColumn(Col: any, dispatch: any, key?: any) {
return (
<Column
key={key}
moveNode={(t: any, s: any) => dispatch(moveNode(t, s))}
addNode={(t: any) => dispatch(addNode(t))}
Nodes={getNodes(this.state.data, Col.id)}
Column={Col} />);
}
createColumns(dispatch: any ){
let result : any[] = [];
this.state.data.Columns.map((Col : any) => {
result.push(this.createColumn(Col, dispatch, Col.id));
})
return result;
}
componentWillReceiveProps(nextProps : any){
console.log(nextProps);
this.forceUpdate();
}
shouldComponentUpdate(nextProps : any, nextState : any){
console.log("EDFDF");
this.forceUpdate();
}
render() {
const dispatch = this.props.dispatch;
const data = this.state.data;
return (
<div className="container">
{this.createColumns(dispatch)}
</div>
)
}