Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

Resources For Learning ngRedux

6/30/2016

0 Comments

 
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:
Picture
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.
Picture
Then in the console we see that there's a new entry that says an action​ has happened:
Picture
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:
Picture
And yes, I can even expand these further to see more stuff!
Picture
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. 
Picture
This log another action out in the console:
Picture
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!
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023