angular - 如何使用ngrx中的数组更新状态

Question

我正在尝试迁移我的应用程序以使用 ngrx。第一个功能是加载我的实际内容并显示它，但我有一些问题。

我在减速器中定义了这个：

export const collectionFeatureKey = 'colecciones';

export interface CollectionsState {
  lista_creadas: Array<Collection>;
  lista_asignadas: Array<Collection>;
  lista_grupos: Array<Collection>;
}

export const initialState: CollectionsState = {
  lista_creadas: [],
  lista_asignadas : [],
  lista_grupos: []
};

我准备并实现了从 API 获取信息的效果。它工作正常。但我不知道如何将三个数组的值分配给状态，实际上我正在这样做：

const collectionsReducer = createReducer(
    initialState,
    on(CollectionActions.loadCollections, state => state),
    on(CollectionActions.loadCollectionsSucess,
      (state, { colecciones }) => {
        return {
          ...state,
          colecciones
        };
      }
    ),
    on(CollectionActions.loadCollectionsError, state => state),
/*...*/

但它没有按预期工作。

我做错了什么？提前致谢

Answer 1

colecciones 是一个对象，您必须将每个数组分配给状态数组：

   on(CollectionActions.loadCollectionsSucess,
      (state, { colecciones }) => {
        return {
          ...state,
          lista_creadas: colecciones.lista_creadas
          lista_asignadas: colecciones.lista_asignadas
          lista_grupos: colecciones.lista_grupos
        };
      }
    ),

使用扩展运算符有一个快捷方式：

   on(CollectionActions.loadCollectionsSucess,
      (state, { colecciones }) => {
        return {
          ...state,
          ...colecciones
        };
      }
    ),

但是由于您的操作包含等效于下一个状态的有效负载，您也可以执行以下操作：

  on(CollectionActions.loadCollectionsSucess,
      (state, { colecciones }) => {
        return colecciones
      }
    ),