I've been working on a few small AngularJS applications at work, and the last one I would say was a relatively small-medium one. The concept is how you should store the data and state of your webapp is something that can help you down the line or screw you over. "When you use regular two-way data binding with an object reference, when some data changes you don't know what changed it".
Here's a pretty nice conference presentation about Redux:
That last link by Rangle.io is especially awesome because it comes with an entire Angular-Redux project! Halfway down the page it explains that you can just run these commands to download the project and run it:
Poking Around With the Console Open
Honestly, the easiest way to really understand Redux is to run this app, open up the console tab of chrome dev tools, and start clicking away! Run npm start and then go to this url:
And then we see this really awesome restaurant seating web application:
Note in the console those two Redux actions StateChangeStart and StateChangeSuccess that were automatically run when Redux loaded. So, remember why we wanted to use Redux in the first place? There was that nagging comment that when you rely on Angular's two-way data binding, "when something changes you don't know what changed it". So here when I enter the number 4 and click New Party let's see if we know what changed what.
Then in the console we see that there's a new entry that says an action has happened:
We can even expand this further to see information about the previous state, the action that was passed in, and the next state by just clicking the little arrow:
And yes, I can even expand these further to see more stuff!
All of this stuff is really awesome to have because it allows you to zoom in and look at each and every change to the state aka the main Redux store (although, I don't seem to be able to see from here where that that "PARTY_JOINED" action was dispatched).
I then select 1 - Party of - 4 form the dropdown and hit Send Party.
This log another action out in the console:
Up For a Challenge?
I'll leave this up to you, but a good exercise to do here would be to add a new action, add a new button that triggers it, and then finally add a new reducer to handle it. This will really solidify your understanding of that basics of how to use redux.
Scaffolding with ngRedux
I used to recommend the yeoman generator Gulp-Angular, but it is now deprecated. Luckily, the same two developers Swiip and xcrzs and the same two awesome developers developed a new awesome generator, Fountain.js, that can scaffold your project in either AngularJS, Angular 2, or even React! Wow! And what's even cooler, is that in the last question on this generator is basically, "what kind of boilerplate code do you want to have scaffolded into your new project?" to which you can choose the third option, Ngrx/store TodoMVC to get a nice project with Redux already set up and ready to go!
The posts on this site are written and maintained by Jim Lynch. About Jim...