Angular 角度Ngrx存储，多个阵列处于状态

我第一次尝试使用Ngrx，我一直在遵循本教程

我的问题是我能用这样的东西来定义我的状态吗：

export interface AppState {
    readonly firstArray: Number[];
    readonly secondArray: Number[];
    readonly thirdArray: Number[];
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export function firstArrayReducer(state: YourFirstArrayType[] = [], action) {
  switch (action.type) {
    case ADD_DATA:
        // This will create a shallow copy of the array and
        // append your latest element to it
        return [...state, action.payload];
    case UPDATE_DATA:
        // Clone your array and return it with the desired modification
        const shallowClone = [...state];
        shallowClone[1] = action.payload; // This is an example
        return shallowClone;
    default:
        return state;
    }
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export const initialState = {
    firstArray: [],
    secondArray: [],
    thirdArray: []
};

export function objArraysReducer (state: YourObjectType = initialState, action) 
{
  // Now you need to find a way to detect what has change and update accordingly
  switch (action.type) {
    case ADD_DATA:
        // Your code...
        return state;
    default:
        return state;
    }
}

在这种情况下，我应该如何实现减速器：

export const UPDATE_DATA = 'TEMP';

export function tempReducer(state: /* How to initialize three empty arrays here ? */, action) {
  switch (action.type) {
    case TEMP:
        /*How to Update arrays here? */
    default:
        return state;
    }
}

---

还可以更新状态中的整个数组吗？（例如，为firstArray指定一个新数组，而不仅仅是从中添加或删除元素）

根据您提供的内容（包括教程源代码），您有两个选项。当每个数组成为状态的一部分（也称为切片）时，每个数组可以有一个reducer，或者可以有一个对象，该对象依次包含3个数组，然后对该对象使用一个reducer。对于第二个选项，您必须管理reducer中对象的3个数组（所有属性）的状态

下面是一些示例，但我做了一些假设，因此您可能需要进行一些调整

选项1: 在根模块中

imports: [
    ...
    StoreModule.forRoot({
        firstArray: firstArrayReducer,
        secondArray: secondArrayReducer,
        thirdArray: thirdArrayReducer
    });
]

imports: [
    ...
    StoreModule.forRoot({ objOfArrays: objArraysReducer });
]

您的reducer代码可能如下所示：

export interface AppState {
    readonly firstArray: Number[];
    readonly secondArray: Number[];
    readonly thirdArray: Number[];
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export function firstArrayReducer(state: YourFirstArrayType[] = [], action) {
  switch (action.type) {
    case ADD_DATA:
        // This will create a shallow copy of the array and
        // append your latest element to it
        return [...state, action.payload];
    case UPDATE_DATA:
        // Clone your array and return it with the desired modification
        const shallowClone = [...state];
        shallowClone[1] = action.payload; // This is an example
        return shallowClone;
    default:
        return state;
    }
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export const initialState = {
    firstArray: [],
    secondArray: [],
    thirdArray: []
};

export function objArraysReducer (state: YourObjectType = initialState, action) 
{
  // Now you need to find a way to detect what has change and update accordingly
  switch (action.type) {
    case ADD_DATA:
        // Your code...
        return state;
    default:
        return state;
    }
}

选项2: 与之类似，但您的状态不是一个简单的数组，它可以是一个对象，该对象将依次具有3个数组

在根模块中

imports: [
    ...
    StoreModule.forRoot({
        firstArray: firstArrayReducer,
        secondArray: secondArrayReducer,
        thirdArray: thirdArrayReducer
    });
]

imports: [
    ...
    StoreModule.forRoot({ objOfArrays: objArraysReducer });
]

您的reducer代码可能如下所示：

export interface AppState {
    readonly firstArray: Number[];
    readonly secondArray: Number[];
    readonly thirdArray: Number[];
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export function firstArrayReducer(state: YourFirstArrayType[] = [], action) {
  switch (action.type) {
    case ADD_DATA:
        // This will create a shallow copy of the array and
        // append your latest element to it
        return [...state, action.payload];
    case UPDATE_DATA:
        // Clone your array and return it with the desired modification
        const shallowClone = [...state];
        shallowClone[1] = action.payload; // This is an example
        return shallowClone;
    default:
        return state;
    }
}

export const ADD_DATA    = 'ADD';
export const UPDATE_DATA = 'UPDATE';

export const initialState = {
    firstArray: [],
    secondArray: [],
    thirdArray: []
};

export function objArraysReducer (state: YourObjectType = initialState, action) 
{
  // Now you need to find a way to detect what has change and update accordingly
  switch (action.type) {
    case ADD_DATA:
        // Your code...
        return state;
    default:
        return state;
    }
}

还可以更新状态中的整个数组吗？（用于 示例将新数组分配给firstArray，而不仅仅是添加或删除 （来自it的要素）

---

这不仅是可能的，因为这是NgRx所基于的期望行为和整体原则。上面我使用了新的数组，而不是对它们进行变异。

帮你自己一个忙，找到一个最新的ngrx教程，它使用新的creator函数来实现动作和效果。更易于使用，代码更少。