Question

在我的Angular应用程序中使用Redux，只需在 Switch Statement 中的每个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
        }
      }
    }
  }
 }
}

Answer 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;

一些注意事项：

您所在州的财产会重复“＃34;摘要＆＃34;很多。 state.summary.detail.expandPanel也会有效并且足够表达吗？
uiState读起来像是在表达使用状态的，但redux并不必担心这一点。这种映射发生在mapStateToProps中。或至少将其缩短为state.ui。

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

1 个答案: