Part 2: Load and Found — This goes here, wait no this goes there….
This article is part of a series written by Matthew Madden and myself. On our most recent chingu session and progress on a non-profit application we are building for HipD. If you would like to read this series please click below for part #1.
At first glance of the application when I joined I was taken back for a minute. It looked exactly like my apps before I learned about the power of Redux. If you’re unfamiliar with stateful style applications this may be lost on you but I’ll try my best to help everyone understand.
React Redux Simplified…
A React Application, it has the ability to maintain state and props. The state is controlled data within the application that the user can manipulate, such as forms, clicking on buttons, etc.
Examples:
Entering your name within a form, you could maintain the value of the form input in your state to use in other places of the application, kinda like an application variable.
Clicking on a menu button could maintain the state of the menu as a bool value (true/false). Which would allow your application to know if you want the menu to be opened or closed.
Now React can maintain this state just fine, you’re able to pass the state from one component to another. With some apps you can do this fairly easy, if you are just handling a few pieces of state. You pass say your menu button state to the apps parent component so it knows when it should apply the menu to the screen, simple enough.
Then you have applications that handle a lot of state, such as forms, displaying data based on forms, data from a database, etc. Maintaining state of this magnitude can be done, but it will look like well…
This is what I use to create and what this application looked like to me at first glance. I remember actually having a small twitch looking at it while I typed in asking @mmadden to allow me to implement Redux ASAP before we did anything.
The Power of Redux
The power of Redux doesn’t need to know the context of the website or which direction we would be going, nor what I’ll be doing on the app next the following week. Once implemented it’s there, then we can shape it however we need to. To give you a visual aid of Redux…
I will not go into depth detail of the code or what went where, but the follow-up to what I have written. Redux creates a “store” (this is the actual term used), for all of your state. It is a global store and available to any component that connects to it. Once connected to the store, your state is now available as a prop (property) of that application. This allows multiple components to have access to the same state from one central location. This This allows for less code in your components by reducing passing state from one component to another then pulling that state up as a prop to the other component and then being abe….. you get the idea.
Ability to gain access to the store state is only half of the power, the other comes from being able to dispatch actions. Actions are what manipulate the state within the Redux store. Redux actions must be pure functions, which removes the occasional sideways errors of mutable data.
Overall when Redux was implemented within this application, the code was reduced by appx. 30% in my opinion. Refactoring the code to es2015 standards reduces the code by half at the very least. It allowed us to work with all of the data of the app much easier and know we were getting the right data back due to the pure functionality.
You can find Part 3 of this series at:
