我的Redux商店更新,组件中的道具也已更新,但组件不会重新渲染

时间:2017-04-11 21:54:06

标签: javascript reactjs typescript redux react-redux

我有一个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>
    )
}

0 个答案:

没有答案
相关问题