如何使用 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
      }
    ),

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

how to update state with arrays in ngrx

typescript

ngrx

angular

ngrx-reducers