Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redux state and Angular 2 routing

Tags:

angular

redux

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?

like image 804
Thorsten Westheider Avatar asked Sep 28 '16 19:09

Thorsten Westheider


People also ask

Can Redux be used with Angular?

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.

IS routing possible with Redux?

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.

What is state in Angular routing?

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.

Is Angular A routing?

Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them.


1 Answers

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

like image 55
sdev Avatar answered Nov 15 '22 05:11

sdev