An­gu­lar state man­ag­ment

Learn how you can use the power of RXJS to man­age your ap­pli­ca­tion’s state with Re­dux

Web Designer - - Meta Contents -

Learn how you can use the power of RXJS to man­age your ap­pli­ca­tion’s state with Re­dux

In this tu­to­rial we are go­ing to show you how you can use the power of RXJS to man­age your ap­pli­ca­tion’s state with Re­dux. In par­tic­u­lar we’ll look at how you can lazy-load por­tions of your store and han­dle asyn­chro­nous ac­tions with epics. To demon­strate this we’ll cre­ate an app which hooks up with Wikipedia’s API. You’ll need a work­ing knowl­edge of Re­dux and its con­cepts.

There is a repo to ac­com­pany this tu­to­rial which con­tains the step-by-step code: https://github.com/ daniel­crisp/re­ac­tive-state-man­age­ment.

1. Cre­ate the app

We’re go­ing to use An­gu­lar’s ex­cel­lent CLI to help us quickly build out an app. Use the fol­low­ing com­mands to in­stall it, cre­ate an app and start a dev server:

npm in­stall -g @an­gu­lar/cli ng new demo --rout­ing cd demo ng serve --open

Next we need to in­stall Re­dux and ‘re­dux-ob­serv­able’, which is Rxjs-based mid­dle­ware for Re­dux. Note that at the time of writ­ing ‘re­dux-ob­serv­able’ doesn’t have sup­port for Re­dux v4 so you need en­sure you only in­stall v3 of Re­dux:

npm in­stall --save re­dux@^3 re­duxob­serv­able

‘re­dux-ob­serv­able’ was cre­ated by the team at Net­flix. There is a great video about it here:

youtube.com/watch?v=aslncyg8whg

And fi­nally we need ‘@an­gu­lar-re­dux’, which bridges the gap be­tween An­gu­lar and Re­dux. In­stall it like this to get the An­gu­lar 5+ com­pat­i­ble ver­sion:

npm in­stall --save @an­gu­lar-re­dux/store@^7

2. Wiring it up

The next step is to wire ev­ery­thing up with An­gu­lar. Cre­ate a folder in­side ‘src/app’ called ‘@store’. I like to use ‘@’ to de­note core mod­ules that aren’t lazy-loaded be­cause they are listed at the top in the direc­tory. In­side the folder add two files: store.mod­ule.ts im­port { Ng­mod­ule } from ‘@an­gu­lar/core’; im­port { Dev­tool­sex­ten­sion, Ngre­dux, Ngre­dux­mod­ule } from ‘@an­gu­lar-re­dux/store’; im­port rootre­ducer from ‘./store.re­duc­ers’; @Ng­mod­ule({ im­ports: [

Ngre­dux­mod­ule

], providers: []

}) ex­port class Store­mod­ule {

con­struc­tor(ngre­dux: Ngre­dux<any>, de­v­tools: Dev­tool­sex­ten­sion) { const mid­dle­ware = []; const en­hancers = []; if (de­v­tools.isen­abled()) { en­hancers.push(de­v­tools.en­hancer());

} ngre­dux.con­fig­ure­store( rootre­ducer(), {}, mid­dle­ware, en­hancers

);

} } store.re­duc­ers.ts im­port { com­binere­duc­ers } from ‘re­dux’; const de­fault­state = {

hello: ‘world’ }; ex­port de­fault func­tion rootre­ducer (in­ject­e­dreduc­ers: any = {}) { re­turn com­binere­duc­ers({

// Core re­duc­ers ex­am­ple: (state: any = de­fault­state) => { re­turn {

...state

};

},

// Lazy-loaded re­duc­ers ...in­ject­e­dreduc­ers

});

}

Note you might need to stop and start the web­pack server af­ter cre­at­ing new files. Also to keep things suc­cinct I’m go­ing to use the <any> type reg­u­larly.

Now open up ‘app.mod­ule.ts’ and im­port both Ngre­dux­mod­ule and your newly cre­ated Store­mod­ule: im­port { Ngre­dux­mod­ule } from ‘@an­gu­larredux/store’; im­port { Store­mod­ule } from ‘./@store/store. mod­ule’;

Add both mod­ules to the im­ports ar­ray in the Ng­mod­ule con­fig and save to reload the app.

Check your store in De­v­tools and you should see the de­fault­state.

3. Cre­at­ing a lazy-loaded mod­ule

In order to demon­strate how to lazy-load por­tions of the store we’ll need to cre­ate a lazy-loaded route and mod­ule. The work­ing direc­tory is ‘src/app’. ng g mod­ule search --rout­ing cd search mkdir com­po­nents cd com­po­nents ng g com­po­nent in­dex

This cre­ates a mod­ule, with a rout­ing file, and a com­po­nent to use as the in­dex route. We’re go­ing to use this in­dex route to con­duct a search of Wikipedia.

4. Set up the in­ter­nal mod­ule rout­ing con­fig

Now we need to add the rout­ing con­fig for in­side our mod­ule. Open up the ‘search-rout­ing.mod­ule.ts’ file that we cre­ated with the CLI. You’ll see an empty routes ar­ray. Im­port the In­dex­com­po­nent and add it to the route con­fig, like so: im­port { In­dex­com­po­nent } from ‘./ com­po­nents/in­dex/in­dex.com­po­nent’; const routes: Routes = [{ path: ‘’, com­po­nent: In­dex­com­po­nent

}];

5. Add an­other route

Let’s also cre­ate a non-lazy-loaded mod­ule and com­po­nent (again start­ing from ‘src/app’) to pro­vide an al­ter­na­tive route.

Since this is not lazy-loaded it is a good place to store com­po­nents that are re­quired through­out the app, so we’ll call it ‘shared’: ng g mod­ule shared cd shared mkdir com­po­nents cd com­po­nents ng g com­po­nent root

Note: I didn’t use the ‘@’ when us­ing the CLI com­mand be­cause it’ll try to use it in the out­put. In­stead I just re­name the folder man­u­ally. We also didn’t use the ‘--rout­ing’ flag, be­cause we’ll han­dle rout­ing in the root app rout­ing mod­ule. Im­port this mod­ule into ‘app.mod­ule. ts’ and add it to the im­ports ar­ray.

6. Add the rout­ing out­let

The next step is to up­date the ‘app.com­po­nent.html’ to de­clare where the routes should be ren­dered, and add a sim­ple nav so we can switch be­tween routes. Sim­ply re­place all the con­tents with this:

<div class=”con­tainer”>

<h1>my App</h1>

<a router­link=”/”>home</a> | <a router­link=”/search”>search</a>

<hr>

<router-out­let></router-out­let>

</div>

Note: It’s not nec­es­sary, but you can add Boot­strap’s CSS if you want it to look a bit ti­dier.

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.