I'm trying to get a grip on Redux state management in my Angular 2 app and am wondering how Redux state and Angular 2 routing can play nicely together.
For example, I have various views (i.e. components with separate routes) that take a date or a date range. So in my app bar I got a button that will display a calendar for the user to pick a date. The view then gets this date as a query parameter,
http://localhost:3000/view&date=20160928
I can then retrieve the date inside the component by listening to the activated route query parameters
this.route.queryParams.subscribe(params => <load records for date>);
Now how would I do this with Redux, that is, how am I supposed to keep the state in the Redux store only? At first I thought I'd just get the date parameter and dispatch it as DATE_ACTION_CHANGE
to the store and then in turn would listen to the state change
date$ = this.ngRedux.select(state => state.date)
.subscribe(date => <load records for date>);
Is that the recommended way of doing this? It works OK as long as I have just one observable. However, I get parameters from various sources. For example, another parameter would be a client's ID. That in turn is part of the URL,
localhost:3000//client/45&date=20160928
That is when it gets hazy, should I update the store with ID and date and then listen for both properties in the state to change? What if one changes, but the other does not? I have a feeling I'm doing this wrong, any pointers?
Redux is defined as an open-source JavaScript library that works to manage and centralize the state of an application. When combined with Angular and React, it is done with the intention of building user interfaces, similar to Facebook's Flux architecture.
Redux and React Router are two of the most used React libraries. Redux is used for app state management, while React Router is used for routing. In a majority of apps, it's necessary to communicate between the app state and the router. Usually, this is in response to an initial user action.
Angular RouterState is the state of the router as a tree of activated routes. It tells how the various components of an application are arranged on the screen to define what should be displayed on it. RouterState represents the state of the router as it keeps changing over time when users navigate from page to page.
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.
What you should probably consider is the following library:
https://github.com/ngrx/router-store (in case you are using ngrx/store).
It provides bindings to connect angular/router to ngrx/store. It also provdes the following store dispatch actions:
Navigation with a new state into history
store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));
Navigation with replacing the current state in history
store.dispatch(replace(['/path'], { query: 'string' }));
Navigation without pushing a new state into history
store.dispatch(show(['/path'], { query: 'string' }));
Navigation with only changing query parameters
store.dispatch(search({ query: 'string' }));
Navigating back
store.dispatch(back());
Navigating forward
store.dispatch(forward());
You can also check this one: https://github.com/dagstuan/ng2-redux-router
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With