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".
This is a nice Youtube video walking you through a codebasae that uses ngRedux in AngularJS 1.4 with ES6 JavaScript:
Here's a pretty nice conference presentation about Redux:
Other Resources
- Great simple example of redux with AngularJS - http://abelmokadem.github.io/redux-and-angularjs-pt1
- Great Intro to Redux Article focusing on ngRedux in Angular 2: https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e#.7lw6qiid0
- This somewhat advanced topic on Redux and AngularJS that focuses on how to store cached data: http://www.bennadel.com/blog/2995-managing-locally-cached-data-with-redux-in-angularjs.htm
- This interesting article on "data flows" with Angular 2 and Redux: https://www.sitepoint.com/data-flows-angular-2-redux/
- This succinct guide on "Adding Redux" to an application: https://mjw56.gitbooks.io/the-developers-guide-to-the-angular-typescript-ga/content/adding_redux.html
- Redux and Angular: Up and Running Slides: http://www.slideshare.net/nirkaufman/redux-and-angular-up-and-running
- Excellent Redux with Angular example by Rangle.io: http://blog.rangle.io/managing-state-redux-angular/
Sample Project
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:
git clone https://github.com/e-schultz/ng-summit-redux.git
cd ng-summit-redux
npm install
npm start
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:
http://localhost:3000/src
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:
This is the essence of redux. All of your app's data is stored in a JavaScript object called "the state". You change that state by dispatching actions, which create a new "next state" object which then becomes "the state".
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!
RSS Feed