How to Build a Counter Using Redux
By: Rianna Cleary
Tags: JavaScript, Programming, React, Coding, Redux

Build a Counter

I began by creating a Redux folder in my src folder and created two files called actions.js and reducers.js . Next, I imported the createStore() function into my index.js file. createStore() is a function that is given to you from Redux. When it’s invoked, it returns an instance of the Redux store.

import { createStore } from 'redux'

Cool! Now that index.js knows about createStore() , we have to create a variable with the name of store and set it equal to the createStore() function. The first argument createStore() takes is a reducer function, so inside the parentheses, we are going to pass in a function that we haven’t written yet called reducerFunc() , which we also have to import at the top of the page.

The next thing we’re going to import is { Provider } from 'react-redux . Provider is used to send down props to other components that are wrapped inside the connect() function, which we will get to in a bit. We are going to pass down the store variable as props to our app as well since most of the functionality is going to be happening there.

Now that we have created our store successfully, let’s create some actions. An action in Redux is an object that describes how it’s going to manipulate the state. In this case, we are making two buttons which increment and decrement the number shown on the page (our counter). So it makes sense to have two actions defined as increment and decrement, like so:

Sweet! Now that we have our actions set up, we can write our reducer function. A reducer function takes in two arguments, the previous state, and the action. The way we’re going to set up our reducerFunc() is with conditions. We are going to implement a switch statement because switch statements have default values, so if no conditions are met, a default value will always be returned.

This statement is saying “Hey, if this action’s type key equals 'INCREMENT' , then increase the value of my state, and if it’s 'DECREMENt' , then decrease the value of my state. If neither of those conditions is met, just return my current state.” If this is hard to follow, that’s totally okay. I’m going to include links below that go more in-depth into the meanings and usages of concepts like actions, reducers, etc. We’re halfway there!

Let’s move over to our App.js file and import the connect() function that we mentioned earlier. connect() is a function provided by 'react-redux' which connects your state to whichever component you're importing connect() to. We should also console.log(props) to see what our props are at the moment. At the very beginning of creating this app, we sent our store down as props to App.js using Provider .

If you go to the console in your browser (cmd + opt +j), you should see this:

{store: {…}, dispatch: ƒ}

Cool, so our store is being passed down, so is our dispatch, but where is our state? For our state to be passed down, we need to implement a function that connect provides for us called mapStateToProps() and is also the first argument that connect() takes. You could name this function anything, but just for clarity I stuck with mapStateToProps() . The main purpose of this function is to return our state. After we write the function, we pass it in connect() so it connects with App.js .

If we check out our props now in the console, our count should have been added! We now have access to our state in App.js . Since we are using button functionality in our application, let's add them to our return.

Both buttons have an onClick event, both of which point to two different functions that we haven’t written yet, one for handling the increment and one for the decrement. They also have text on both of them indicating which button does what. Our functions should look something like this:

Since our app is a functional component, we have to declare our functions as variables. Both of them have a props.dispatch({}) function. dispatch() dispatches actions and triggers the changes in your state from your reducerFunc() , so both of these functions trigger different changes that are being made to our counter. Your finished product should look like this:

Congratulations! You’ve successfully built a counter using Redux. Check out the GitHub repo for this if you want.

Happy coding!