标准化 ngrx 数据存储中的数据形状

Question

我有一个应用程序可以从 Firebase 检索与用户关联的任务。在下面的示例中，我检索了三个任务，但我无法理解为什么我的数据形状如下所示：

我希望它看起来像这样：

task: [{ ... }, { ... }, { ... }]

是否可以像上面那样扁平化我的店铺？这是我的代码如下。映射发生在 TaskActions.dataReceived:

import * as TaskActions from './task.actions';
import { Action, createReducer, on } from '@ngrx/store';
import { ITask } from '../../models/task';

export interface State {
  task: ITask | null;
  error: any;
}

const initialState: ITask = null;

export const taskReducer = createReducer(
  initialState,
  on(TaskActions.getData, state => ({ ...state })),
  on(TaskActions.dataReceived, (state, payload) => ({
    ...state,
    tasks: payload.payload ? [ { ...state, ...payload.payload } ] : []
  })),
  on(TaskActions.dataNotReceived, state => ({ ...state })),
  on(TaskActions.signOut, state => ({ ...state })),
  on(TaskActions.signOutSuccess, state => ({ ...state, ...initialState })),
);

export function reducer(state: ITask | undefined, action: Action) {
  return taskReducer(state, action);
}

Answer 1

(state, payload) => ({
    ...state,
    tasks: payload.payload ? [ { ...state, ...payload.payload } ] : []
  })

这实际上是将现有状态 tasks 对象设置为状态的 copy 并且 merging payload.payload反对它。

您的意思是只将负载添加到 tasks 数组吗？如果是这样，你应该这样做

if (payload.payload) {
   return {
      ...state,
      tasks: [...state.tasks,  payload.payload]
   }
}

return state

标准化 ngrx 数据存储中的数据形状

Normalising data shape in ngrx data store

angular

typescript

ngrx

ngrx-store