Не удается инициализировать состояние хранилища ngrx (v. 4.x)

В настоящее время я изучаю использование хранилища ngrx (v. 4.0.3) для управления состоянием. Кажется, это отличный проект.

Я столкнулся с небольшим ударом по дороге, пытаясь инициализировать состояние моего магазина. документация выглядит довольно просто, но все же я не могу понять, где я ошибаюсь.

Вот соответствующие фрагменты кода:

в app.state.ts

export interface AppState {
    searchText: string;
}

В поиске-text.reducer.ts

export const UPDATE = 'UPDATE';

export class UpdateSearchTextAction implements Action {
    readonly type: string = UPDATE;
    constructor(public readonly text: string) {}
}

export function searchTextReducer(state: string, action: UpdateSearchTextAction) {
    switch(action.type) {
      case UPDATE:
        return action.text;
    }
};

В app.module.ts

export const reducers: ActionReducerMap<AppState, UpdateSearchTextAction> = {
    searchText: searchTextReducer
};

export const initialState: InitialState<AppState> = {
    searchText: 'sds'
};

....

imports: [
....
StoreModule.forRoot(reducers, initialState)
]

в каком-то компоненте

constructor(private store: Store<AppState>) {
    this.searchBoxText = store.select('searchText');
    this.searchBoxText.subscribe(text => console.log('value = [' + text + "]"));
}

Итак, когда приложение загружается, я ожидаю увидеть в консоли следующее:

value = [sds]

но я вижу

value = [undefined]

Позже, как только я начну вводить ввод, который запускает UpdateSearchTextAction, консоль действительно регистрирует правильное значение. Итак, похоже, я правильно настроил магазин.

Вероятно, мне не хватает чего-то очень простого. Кто-нибудь может дать совет?


ngrx-store ngrx-store-4.0
person Mike Baum    schedule 25.08.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Поскольку у вас есть это как readonly, вам не разрешено присваивать значение,

export class UpdateSearchTextAction implements Action {
    readonly type: string = UPDATE;
    constructor(public text: string) {}
}

И вам нужно отправить значение с помощью оператора dispatch

this.store.dispatch(new UpdateSearchTextAction.UPDATE(<<string>>));
person Aravind    schedule 26.08.2017
comment
То, что вы предлагаете, это то, что я уже делал, но только в ответ на ввод пользователя. Я пытаюсь понять, как установить начальное состояние AppState без отправки действия. Поскольку подпись StoreModule.forRoot принимает редюсер и StoreConfig, которые, как я полагаю, можно использовать для инициализации состояния, я в растерянности. Чего я не хочу, так это того, чтобы все мое состояние в магазине было инициализировано неопределенным. - person Mike Baum; 28.08.2017

arrow_upward
0
arrow_downward

Вы должны указать значение по умолчанию для аргумента state и вернуть то же состояние, если ни одно действие не соответствует. Попробуйте изменить редуктор на следующий:

export function searchTextReducer(state: string = '', action: UpdateSearchTextAction) {
    switch(action.type) {
      case UPDATE:
        return action.text;
      default:
        return state;
    }
};
person Eugene    schedule 01.09.2017