如何在 Redux 中正确创建新状态？答案

【问题标题】：How to properly create a new state in Redux?如何在 Redux 中正确创建新状态？
【发布时间】：2018-08-26 15:02:31
【问题描述】：

在我的 Angular 应用程序中使用 Redux，并在 Switch 语句 内的每个 Case 中简单地创建一个新状态。然而，即使我的代码工作得很好，我对 我在每个案例中克隆我的对象 的方式感到不舒服，所以有没有 更好的 或 更清洁的克隆方式？如何改进案例陈述？提前致谢！

这是我的

界面：

export interface AppState {
  session: {},
  uiState: {
    summary: {
      summaryDetail: {
        headerTitle: string;
        expandSummaryDetailPanel: boolean;
        showSummaryDetail: boolean;
        someProperty: string;
       }
       showSummaryTab: boolean;
    }
  }
};

初始状态：

export const initialState: AppState = {
  session: {},
  uiState: {
    summary: {
      summaryDetail: {
        headerTitle: 'new title',
        expandSummaryDetailPanel: false,
        showSummaryDetail: false,
        someProperty: ''
      },
      showSummaryTab: false,
    }
  }
};

切换语句：

export function appReducer(state = initialState, action: appActions.AppAction) { 

 case appActions.EXPAND_SUMMARY_DETAIL_PANEL: {
  return {
    ...state,
    uiState: {
      summary: {
        ...state.uiState.summary,
        summaryDetail: {
          ...state.uiState.summary.summaryDetail,
          expandSummaryDetailPanel: action.payload
        }
      }
    }
  }
 }
}

【问题讨论】：

标签： angular ecmascript-6 redux ngrx ngrx-store

【解决方案1】：

您需要额外的库来避免重复嵌套如果您的状态实际上必须如此深入地嵌套。 我会先尝试以不同的方式（更平坦）对状态进行建模。但如果这不是一个选项，你可以这样做：

case appActions.EXPAND_SUMMARY_DETAIL_PANEL:
    // Find a library that clones objects or use something like immutablejs.
    const newState = deepClone(state);
    newState.uiState.summary.summaryDetail.expandSummaryDetailPanel = action.payload;
    return newState;

几点说明：

您所在州的房产多次重复“摘要”一词。 state.summary.detail.expandPanel 是否也能发挥作用并具有足够的表现力？
uiState 读起来就像您在表达 where 使用状态，但 redux 不必担心这一点。这种类型的映射发生在mapStateToProps。或者至少将其缩短为 state.ui。

【讨论】：