ngrx Reducer - правильный способ вернуть новое состояние - PullRequest
Новая
       6

ngrx Reducer - правильный способ вернуть новое состояние

0 голосов
/ 23 сентября 2018

Я использую ngrx / store в своем проекте Angular 5.Состояние приложения, которое я сохраняю, выглядит примерно так: 

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

У меня есть отдельные редукторы для каждого свойства объекта состояния, поэтому я могу прослушивать изменения индивидуально для каждого свойства.Это состояние затем отображается через службу для компонентов приложения.

В моем редукторе (SelectedCustomerReducer) одно из действий состоит в том, чтобы заменить текущего выбранного клиента (2-е свойство выше) нановый объект Customer.Я не понимаю, как редуктор должен возвращать новое значение.

Мой редуктор уже получает новый объект Customer в action.payload;поэтому я должен просто вернуть это как новое состояние?

Например, 

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

1 Ответ

0 голосов
/ 23 апреля 2019

Прежде всего вы должны инициализировать ваши «Редукторы» в «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 { }

Затем вы должны поместить все ваши «Редукторы» в «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;
  }
}
...