React & Redux Simplified (Praise Crom)
So before I go explaining how redux works within the react framework, I’m going to go ahead and provide the example code immediately.
I learn by direct application—not necessarily by instruction alone. So here’s the code for tinkerers like myself if you want to jump straight in: https://github.com/solllve/create-redux
React has quickly become a new standard for front-end developers, and like any hot new framework, developers have been trying to find the most elegant way to organize the different states of large-scale applications, enter redux!
I’m not going to go in-depth explaining redux. The whole point of this article is to get the quickest and simplest implementation of redux in react to gain a better fundamental understanding. I highly recommend visiting their documentation after this little article: https://redux.js.org/
Okay, there are three things you should remember when you think redux:
- Store: Contains immutable states of the application.
- Reducers: Creates copies of state from the store for modifications.
- Actions: Deploy modified states from reducers via cases.
All we’re going to do here is change the boolean in the store of cromPraised from false to true, using a reducer and an action via a standard function—in this case a button.
In most tutorials I’ve read, they have multiple folders containing store, reducers and actions. For simplicity I have only one folder called store. The index.js contains both the store and a single reducer.
What is happening here is this index file is doing a couple things. First thing we’re doing is importing the createStore function from redux, and including our single reducer inside the createStore function.
Next thing is we have a single reducer that contains a case called PRAISE_CROM, which — upon execution of an action — will alter the initial states of the store. The initial state of cromPraised is false. Our objective is to create a reducer case (PRAISE_CROM), which will copy the object, and alter the copy via an action.
Notice that within the return object, cromPraised isn’t showing true yet, but instead is using action.cromPraised, this creates a nested object we’ll pass via an action, much like a variable.
Most applications will have multiple reducers, in which case you could include and use the combineReducers function, but for the purposes of this small demonstration I’ll leave that out.
Next we need an action:
This action will pass the true boolean onto the PRAISE_CROM case inside the reducer once the function is executed.
Okay, so how do we connect this store data onto react? Simple, let’s make a component that will connect to the store:
From the top you can see we’re including some basic functions from react-redux to use the connect function, as well as connecting our action.
The constant mapStateToProps will tie in our nested variable from state, and since it’s a boolean we can do a simple conditional. In this case I’m using classes for the true/false conditional, which will show and hide my Conan gif.
A lot of the code in this component is purely subjective. The primary objective is to pass your action using the import command, and then execute it using whatever you see fit—in my case, a simple onClick does just fine.
Lastly, we want to connect Provider to the index.js of our root folder.
Wrapping Provider with our store object will allow our app to pull store information quickly and easily from any place of the application.
So to wrap this up there are a few important things to remember:
- The store is immutable. Meaning information is only altered in reducers as copies via cases. This allows versioning of altering states of the app.
- You want to use functions like Object.assign(), .filter(), .concat(), and .map() to alter states in your reducers & actions.
- Separate your components as smart and dumb components. Smart components use connect(), while dumb components do not.
- store.dispatch() creates a new modification of state.
I hope this at least creates a simple stepping stone into exploring more of what redux has to offer for large scale react development.
If you have any questions, email me at email@example.com