The root state of the store.
Constructor
Optional ngZone: NgZonePrivate _storePrivate property that holds the application's store object. The Store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level.
The root state of the application's store
the type of actions which may be dispatched by this store
Protected Readonly _store$Angular subject store corresponds to store change event and trigger rxjs change event
Private Optional ngStatic storeConfigures the store with the provided reducer, initial state, middleware, and enhancers.
This should only be called once for the lifetime of your app, for example, in the constructor of your root component.
export class AppModule {
constructor(ngRedux: NgRedux<IAppState>) {
// Tell @angular-redux2/store about our rootReducer and our initial state.
// It will use this to create a redux store for us and wire up all events.
ngRedux.configureStore(rootReducer, INITIAL_STATE);
}
}
Throws an error if the store has already been initialized.
The root reducer function of the store.
The initial state of the store.
Optional middleware: Middleware<any, AnyAction>[] = []The middleware functions to be applied to the store.
Optional enhancers: StoreEnhancer<RootState>[] = []The store enhancers to be applied to the store.
Configures a sub-store with a specified base path and local reducer. Carves off a 'subStore' or 'fractal' store from this one.
The returned object is itself an observable store, however, any selections, dispatches, or invocations of localReducer will be specific to that sub-store and will not know about the parent ObservableStore from which it was created.
This is handy for encapsulating component or module state while still benefiting from time-travel, etc.
onInit() {
// The reducer passed here will affect state under `users.${userID}`
// in the top-level store.
this.subStore = this.ngRedux.configureSubStore(
['users', userId],
userComponentReducer,
);
// Substore selections are scoped to the base path used to configure
// the substore.
this.name$ = this.subStore.select('name');
this.occupation$ = this.subStore.select('occupation');
this.loc$ = this.subStore.select(s => s.loc || 0);
}
The sub-store service instance.
The type of the sub-store state.
The base path of the sub-store.
The local reducer of the sub-store.
Dispatches an action to the store instance.
A dispatching function (or simply dispatch function) is a function that
accepts an actions or an async actions; it then may or may not dispatch one
or more actions to the store.
We must distinguish between dispatching functions in general and the base
dispatch function provided by the store instance without any middleware.
The base dispatch function always synchronously sends an actions to the store's reducer, along with the previous state returned by the store, to calculate a new state. It expects actions to be plain objects ready to be consumed by the reducer.
class App {
@Select() count$: Observable<number>;
constructor(private ngRedux: NgRedux<IAppState>) {}
onClick() {
this.ngRedux.dispatch({ type: INCREMENT });
}
}
This method dispatches an action object to the store instance. If the store instance is not initialized, it will throw an error. The dispatch method runs in the Angular zone by default to prevent unexpected behavior when dispatching from callbacks to 3rd-party.
the action object type.
the action object to be dispatched to the store.
Accepts a Redux store, then sets it in NgRedux and allows NgRedux to observe and dispatch to it. This should only be called once for the lifetime of your app, for example, in the constructor of your root component. If configureStore has been used, this cannot be used.
class AppModule {
constructor(ngRedux: NgRedux<IAppState>) {
ngRedux.provideStore(store, rootReducer);
}
}
void
Error if the store has already been initialized.
The new root reducer function to use.
The Redux store instance to be initialized.
Replaces the current root reducer function with a new one.
const newRootReducer = combineReducers({
existingSlice: existingSliceReducer,
newSlice: newSliceReducer
})
ngRedux.replaceReducer(newRootReducer)
The new root reducer function to be used.
Select a slice of state to expose as an observable.
constructor(private ngRedux: NgRedux<IAppState>) {}
ngOnInit() {
let { increment, decrement } = CounterActions;
this.counter$ = this.ngRedux.select('counter');
}
An Observable that emits items from the source Observable with distinct values
The type of the selected slice of state
Optional selector: Selector<any, SelectedType>A key or function to select a part of the state
Optional comparator: ComparatorA comparison function called to test if an item is distinct from the previous item in the source
Protected setAdds a change listener to the store, which will be invoked any time an action is dispatched, and some part of the state tree may potentially have changed.
constructor(
private ngRedux: NgRedux<IAppState>,
private actions: CounterActions,
) {
this.subscription = ngRedux
.select<number>('count')
.subscribe(newCount => (this.count = newCount));
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
A function to remove this change listener.
A callback function that will be invoked whenever the state in the store has changed.
Generated using TypeDoc
The NgRedux class is a Redux store implementation that can be used in Angular applications. It extends the AbstractStore class from Redux.