I've been thinking a lot about state and how to store data in Angular applications. Yesterday I gave a talk about unit testing in AngularJS and Angular 2. The people there are really liked the talk, but afterwards I learned that at the company whose office I was at (AWeber) they were creating all their new applications with React. I had seen a few high profile job postings mention React so even though I love Angular I wanted to not look like a fool in an interview. Also, I was curious how React components were similar and different from Angular components. And finally, I see the advanced Angular devs getting really excited about Redux so I wanted to figure out 1. what was so great about it, 2) why I would even want to use it in Angular, and 3) what the code looks like to actually use it! This post is just me getting my thoughts out as I try to understand React and Redux better. Maybe it could help you understand them better as well.
What is Angular Stuff and What is Just SPA Stuff?
People who only know Angular really love Angular. And sometimes they are afraid of other frameworks because they don't realize all of the similarities between the two. Here are some general good things to expect with when building a SPA:
Is React a Framework or Not?
Some people will say that, "React is just the view". Yeah, that's kind of true, but when a project uses React people almost have to refer to it as a, "React Project". In real-world production applications you'll almost never see React mixed with Angular or another hardcore SPA framework (someone please correct me here). When looking to join a new company you'll often hear things like, "we have a React app" or, "it's an angular 1.4 app". This makes we think that React is more than just a library. It heavily influences how you structure you application and provides some magic so your files can interact with each other.
Is Dependency Injection Redundant?
The Redux Attraction
Similarities Between Redux & MMO Game Backend Communication
Back in the good 'ole Flash days I had worked on a lot of online multiplayer games. There was always a lot of messaged being sent and received between the front and backend. Regardless of whether it was a Java backend on Electroserver or the C# Player.io / Yahoo Games / whoever owns it now, the API was similar- a string and an object with parameters. For example, here's an example from the backend C# code for how you send a message to a client:
To me this looks eerily similar to one of your front-end components dispatching an action in an application that uses Redux. Instead of reaching into your DataService object and just updated the a variable you would dispatch the action, and let a special function (called a reducer) handle that action by making a deep copy of your state object, modifying the new object as needed, and then telling redux to use the new object as your store.
The posts on this site are written and maintained by Jim Lynch. About Jim...