Basic React-Redux Set Up

Recently, I worked on the project of creating an e-commerce style app. I went into the project thinking “I know how a store works, this should be simple”. Very quickly I realized the scale of what I was trying to d and found myself in an endless cycle of component lifecycles. Displaying a product rating, adding items and saving a cart, re-rendering and updating products and user accounts all left my code feeling clunky and sloppy. Lucky for me, in comes Redux. You may find that for a smaller app, Redux includes a lot of boilerplate code that can seem cumbersome, however if you find yourself building a larger app with many components that rely on each other, Redux allows you to keep your state as “store”, and rather than passing it up and down from parent to child, store is a separate entity accessible from any component.

Redux is a state management tool centered around a few key words, for this blog we will be covering “store”, “actions”, “reducers”, and “dispatch”. Again, Redux is most ideal when creating as large scale project. For this example, we will creating a simple counter that increments on user click.

To start, you will want to run:

npx create-react-app <app-name>

followed by:

npm instal redux react-redux

There are many places to start, however I like to start with my folders.

NOTE: when starting afresh app you will want to eliminate some of the excess files, we will not be covering that here.)

Within src, you will want to create 2 sub-folders called “actions” and “reducers”

In the reducers folder, create a file called “counter.js”

Reducers take in an argument of an action, based on the name or type of that action, they will return an updated state. This doesn’t make a whole lot of sense just yet, but soon we will begin connecting all of the dots.

Next, you will want to head back to index.js and set up your “store”.
Here, we need to add a few things, we need to import and create our store, activate the ‘Redux Dev Tools’, as well as our reducer which we have just made. We will also import “Provider” from react-redux, this is what makes our global state or “store” accessible to the entire app.

On line 9, we use our createStore which we have imported on line 5. Store takes in our reducer(s), as well as the line needed to activate Redux Dev Tools as arguments.( Be sure you have enabled the Redux Dev Tools in Chrome)

Lines 15 & 17 show us wrapping our entire app in the Provider (imported on line 7), and passing store into the provider as a prop.

Next, we will move to App.js to begin displaying and using what we have set up so far.

On line 3 we want to import useSelector, as well as useDispatch from react-redux. useSelector is a built in function that allows us to access the state and set them to variables like on line 6. Once this variable is set, we can display it in browser like in line 10.

Next, we will want to set up our actions so that we can begin to modify our store. A few steps back, we created another folder called “actions”. Within this folder, create a file called “index.js”, this will house all of our actions.

For our example we will be doing a simple +1 increment, as well as a -5 which will take in a variable or “payload” which will be passed down.

Once this is completed, head back to App.js to import these new actions as seen below on line 4.

We will need buttons to make this work, so we will add those as well as define a const called “dispatch” so that we can utilize the ‘useDispatch’ that we imported earlier.

Notice on our ‘-5’ button on line 14, we are passing in the number 5 into our action, which is imported on line 4. Looking back at our actions, this is considered the “payload”

Once this is completed, you can run npm start and see what we have made in browser. We can open up our Redux tools in the same way you would open up React tools or access your console, simply right click > inspect > Redux. In the dev tools you should see a button called “State”, clicking on this will show you the store or state of your app. Try out the new buttons and enjoy your hard work, this is your first step in using React-Redux