ngrx Reducer - 恢复新状态的正确方法

Question

我在Angular 5项目中使用ngrx / store。我存储的应用程序状态看起来像这样

class AppState{
    private customerList: Customer [];
    private selectedCustomer: Customer;
    private countriesOperational: Country [];
}

我为state对象的每个属性都有单独的reducer，所以我可以单独监听每个属性的更改。然后通过服务将此状态公开给应用程序组件。

在我的reducer（SelectedCustomerReducer）中，其中一个操作是用新的Customer对象替换当前选定的客户（上面的第二个属性）。我对减速器应如何返回新值感到困惑。

我的reducer，已经在action.payload中获得了一个新的Customer对象;我应该把它作为新的状态归还吗？

对于例如

export function SelectedCustomerReducer(state: Customer = new Customer(), action: Action){
    switch(action.type){
        case 'updateSelectedCustomer':
               return action.payload; 
               //OR               
               return Object.assign({}, state, action.payload);
    }
}

Answer 1

首先，您必须将“Reducers”初始化为“app.module.ts”。

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';

import { AppComponent } from './app.component';
import { Reducers } from './store/app.reducers';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    StoreModule.forRoot(Reducers)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后你必须将所有“Reducers”放入“ActionReducerMap”。它是通用类型，不用说你必须将操作界面与“app.reducers.ts”文件交配。看下面的代码。

import { ActionReducerMap } from '@ngrx/store';

import * as shoppingList from '../shopping-list/store/shopping-list.reducers';

export interface AppState{
  shoppingList: shoppingList.State,
}

export const reducers: ActionReducerMap<AppState> = {
  shoppingList: shoppingList.shoppingListReducer
}

然后你可以创建“Reducer”并将“State”和“Action”分别输入“shopping-list.reducers.ts”文件

import * as productListActions from './shopping-list.actions';
import { Product } from '../product/product.model';

export interface State{
  products: Product[];
}

const initialState: State = {
  products: [
    new Product('PC', 5),
    new Product('OS', 10),
  ]
};

export function shoppingListReducer(state = initialState, action: productListActions.ProductListActions){
  switch(action.type){
    case productListActions.ADD:
      return {
        ...state,
        products: [...state.products, action.payload]
      };
    default:
      return state;
  }
}