Cannot initialize the state of ngrx (v. 4.x) store - ngrx-store

Question

I am currently looking into using the ngrx store (v. 4.0.3) for state management. It seems like a great project.
I have hit a bit of a bump in the road while trying to initialize the state of my store. The documentation makes it look rather simple, but yet I am not able to see where I am going wrong.
Here's the relevant code snippets:
in app.state.ts
export interface AppState {
searchText: string;
}
In search-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;
}
};
In app.module.ts
export const reducers: ActionReducerMap<AppState, UpdateSearchTextAction> = {
searchText: searchTextReducer
};
export const initialState: InitialState<AppState> = {
searchText: 'sds'
};
....
imports: [
....
StoreModule.forRoot(reducers, initialState)
]
in some Component
constructor(private store: Store<AppState>) {
this.searchBoxText = store.select('searchText');
this.searchBoxText.subscribe(text => console.log('value = [' + text + "]"));
}
So, when the application loads, I would expect to see the following logged to the console:
value = [sds]
yet I see
value = [undefined]
Later, once I start typing in an input that triggers an UpdateSearchTextAction the console does indeed log the correct value. So it seems like I've setup the store correctly.
There is probably something real simple I'm missing. Can anyone provide some advice?

Answer 1

Since you are having it as readonly you are not allowed to assign the value,
export class UpdateSearchTextAction implements Action {
readonly type: string = UPDATE;
constructor(public text: string) {}
}
And you need to dispatch the value using a dispatch statement
this.store.dispatch(new UpdateSearchTextAction.UPDATE(<<string>>));

Answer 2

You must specify default value for state argument and return the same state if no action matches. Try to change your reducer to the following:
export function searchTextReducer(state: string = '', action: UpdateSearchTextAction) {
switch(action.type) {
case UPDATE:
return action.text;
default:
return state;
}
};