【问题标题】:Redux state not updating in react componentRedux 状态未在反应组件中更新
【发布时间】:2020-04-11 03:31:18
【问题描述】:

多次看到这个问题,但我有一个案例,其中许多建议的修复已经实施。

商店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 开发工具:

尽管 Redux 开发工具显示 reducer 工作并且存储包含获取的数据,但我终生无法弄清楚为什么我的组件中仍然有初始状态对象。

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

【问题讨论】:

  • 你到底在哪里变异了 state.platform?也许你在 Redux 开发工具中看到了 INITIAL_STATE?

标签: reactjs redux react-redux redux-thunk


【解决方案1】:

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

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

【讨论】:

    【解决方案2】:

    尝试在具有相同动作类型的 reducer 分支中构建一个新的“平台”副本。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-02
      • 2021-11-16
      • 1970-01-01
      • 1970-01-01
      • 2016-10-28
      • 2021-08-21
      相关资源
      最近更新 更多