How to Build a Counter Using Redux
Learn the basics of Redux by making a small counting app
This is a tutorial on how to implement an incrementing/decrementing counter using Redux.
For this tutorial, it is helpful to already know the fundamentals of:
- Javascript
- React
What Is Redux, Anyway?
Redux is a state container for various code libraries that manages state. In this case, we are using it with React. It’s more of a matter of choice in terms of whether or not to implement it in your applications. I just started to learn about Redux and was considering implementing it for a project I’m working on. It took me a long while to understand it (by understand, I mean understand about 30% of it). I thought about building a small app to help me grasp the basics because practicing is the key when learning something new.
I started creating my app by running the command npm install -g create-react-app my-project-client and installing two Redux packages npm i redux && npm i react-redux. After that’s all done, you run npm i && npm start, which will install all other necessary packages and start up your server.
Now that your app skeleton is built, we can get to coding!
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!
