React组件中的Redux状态未更新

时间:2019-12-18 14:42:47

标签: reactjs redux react-redux redux-thunk

这个问题问了很多遍,但我认为已经实施了许多建议的修复程序。

商店platform的部分正在被一组异步函数调度操作所突变。

export const actionHandlers: ActionHandler<PlatformActionTypes, IPlatformState> = {
  [PlatformActionTypes.SET_PRODUCT]: (state: IPlatformState, action: ISetProductAction) => ({ ...state, product: action.payload }),
  [PlatformActionTypes.SET_PRODUCT_GROUPS]: (state: IPlatformState, action: ISetProductGroupsAction) => ({ ...state, productGroups: action.payload }),
  [PlatformActionTypes.TOGGLE_SELECTED_PRODUCTS]: (state: IPlatformState, action: IToggleProductAction) => ({ ...state, productGroups: action.payload }),
  [PlatformActionTypes.SET_PRODUCT_GROUP_DATA]: (state: IPlatformState, action: ISetProductGroupData) => {
    const { title } = action.payload;
    const index = state.productGroups.findIndex((group) => group.title = title);

    state.productGroups.splice(index, 1, action.payload);

    return state;
  }
};


export default function designstartReducer(state: IPlatformState = INITIAL_STATE, action: IPlatformAction) {
  const handler = actionHandlers[action.type];

  return handler ? handler(state, action) : state
}

容器

const mapDispatchToProps = {
  onFetchProductDetails: fetchPlatform,
};

const mapStateToProps = (state: IAppState) => ({
  ...state.platform,
});

const connected = connect(mapStateToProps, mapDispatchToProps)(Platform);

export default analytics.trackPage({ componentName: 'Platform' })(connected);

api响应后的Redux开发工具:

enter image description here

尽管Redux Dev工具显示了reducer的工作情况以及包含所获取数据的存储,但我终生无法弄清为什么我的组件中仍然有初始状态对象。

我能想到的一个原因是state.platform形状没有改变,因此没有在组件中触发更新?

2 个答案:

答案 0 :(得分:0)

尝试在具有相同操作类型的减速器分支中构造“平台”的新副本。

答案 1 :(得分:0)

是的。我一生中最大的男生错误。

我的商店创建是在组件的render方法中触发的,这会引发大量重新渲染,这意味着商店正在重置。