ngRx: различия между ключами из интерфейса состояний и ключами из StoreModule.forRoot

Я только что запустил ngRx и столкнулся с небольшой проблемой.

Хотелось бы узнать разницу между ключами состояний интерфейса и модулей forRoot.

export interface ConfigurationState {
  readonly configuration: Configuration;
}

StoreModule.forRoot({
  configuration: ConfigurationReducer,
}),

export function configurationReducer(state: Configuration = undefined, action: ConfigurationActions.Actions): Configuration {
  switch (action.type) {
    case ConfigurationActions.SET:
      return action.payload;
    default:
      return state;
  }
}

this.store.select('configuration')

Когда я выбираю магазин с 4-м фрагментом кода, я вижу подсказку intellisense для ключей 1-го фрагмента кода.

Если я изменю ключ 2-го фрагмента кода, это ничего не изменит.

Итак, мой вопрос: какова цель forRoot? Ключи важны?


typescript angular rxjs ngrx
person Community    schedule 18.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

В примере, который вы публикуете, интерфейс State на самом деле не добавляет никакого значения, но если вы сделаете это следующим образом, он добавит некоторое значение проверки типов.

// reducer.ts

/**
 * As mentioned, we treat each reducer like a table in a database. This means
 * our top level state interface is just a map of keys to inner state types.
 */
export interface State {
  layout: fromLayout.State;
  router: fromRouter.RouterReducerState;
}

/**
 * Our state is composed of a map of action reducer functions.
 * These reducer functions are called with each dispatched action
 * and the current or initial state and return a new immutable state.
 */
export const reducers: ActionReducerMap<State> = {
  layout: fromLayout.reducer,
  router: fromRouter.routerReducer,
};


// app.module.ts
StoreModule.forRoot(reducers),

Взято из примера приложения NgRx

person timdeschryver    schedule 18.09.2018
comment
Итак, используя ActionReducerMap, вы заставляете свои редукторы соответствовать вашему интерфейсу. Умный ! Я действительно не особо углублялся в репозиторий Ngrx, я следовал руководствам, которые можно найти в Интернете. Спасибо за этот фрагмент кода, теперь я понимаю, почему он не работал с другими ключами. - person ; 18.09.2018
comment
Отлично, рад, что смог помочь :) - person timdeschryver; 18.09.2018