Redux for beginner: Part 1

Photo by Tudor Baciu on Unsplash

What is Redux? You’ve probably already encountered apps or projects labeled as ‘Built with React with Redux.’ It may seem like Redux is a dependent subcategory of JavaScript libraries or frameworks like React or Angular. While Redux is indeed very useful when combined with them, it can also be used independently, without React or Angular. This means that you can build an app using Redux with vanilla JavaScript.

Redux is one of the JavaScript libraries used to manage application state. Yes, the state is the same concept we encounter in React. If you’re not familiar with the term, think of state as a wallet for bills and coins; it’s where we store data. When you need to perform certain actions with data, you retrieve the data from the state, much like taking money out of your wallet when making a purchase. Managing and controlling state is crucial to ensure your application functions as intended, similar to ensuring you have enough and appropriate bills and coins in your wallet before heading to the shopping mall.

Let’s clarify this by building three applications with Redux. We’ll be using Visual Studio Code, Node.js, and Yarn. If you don’t have Node.js or Yarn installed, please follow the instructions in the provided links.

Download | Node.js

Yarn

Let’s create a folder by running the code in your terminal as shown below. Initially, we’ll only use vanilla JS with Redux, but in Part 3, we’ll build an app with React and Redux.

$npx create-react-app redux-practice

Did you get “Happy hacking!”?

Great!

Let’s organize our folder to simplify it. Open the ‘index.html’ file in the ‘public’ folder and make the following changes.

Delete ‘App.js’ in the ‘src’ folder to reduce confusion. Open ‘index.js’ in the ‘src’ folder and remove all pre-existing code. We will then proceed to call certain DOM elements and add functions as follows.

Run the following code in your terminal to start the server.

$yarn start

If you followed the instructions correctly, you will see the following reaction in your browser.

Yes, you have just created a small number counter app using vanilla JavaScript.

From now on, we will build the same app using Redux to understand how it works. Before we start, let’s install Redux by executing the code below.

*If the server is still running, please stop it first. (ctrl + C).

$yarn add redux

Delete all the code in ‘index.js’ except for the DOM elements and add the following new code.

We imported ‘createStore’ from the Redux module, which allows us to define the ‘store’ where we will store the data state.

A reducer is a function we’ll use to modify the state, similar to how ‘setState’ works in React.

***You can use any name instead of ‘store’ or ‘reducer’.

Add ‘console.log(store.getState());’ to line 12, then run the server with ‘$yarn start’.

***getState() method is how you can get data from the state.

If everything is correct, you should see ‘I live in the state’ in your developer tool console. This means that the value returned from the reducer function is stored in the ‘store’ state.

I will make the code more practical by modifying it as follows.

I’ve added ‘count’ as a parameter and set its default value to 0 on line 7. Check your console log in the developer tools

Yay! ‘count’ is stored in ‘store’! The value changed from 0 to 1.

In the reducer function, we can pass an argument (data) and manipulate it as needed, then return it to store the data in the ‘store’ state.

How can we set conditions to change ‘count’ in the reducer function?

We will use an action object. Add ‘action’ as the second parameter in the reducer function on line 7, insert an ‘if’ condition from lines 8 to 10 within the function’s brackets, and add ‘store.dispatch({ type: ‘ADD’ })’ on line 15, as shown below.

In essence, we set the ‘type’ key’s value to ‘ADD’ using the ‘dispatch’ method (a pre-made method in Redux). This process is how you can modify the action object, which has ‘type’ as a key. When this process changes the type of the action, the ‘dispatch’ method invokes the reducer function, and the return value is then stored in the store.

Below line 15, add ‘store.dispatch({ type: ‘ADD’ })’ as many times as you like. You will notice that the count increases each time you call the ‘dispatch’ function.

I called the ‘dispatch’ method three times, and you can observe that the count was incremented three times in the developer tool console. Now, it’s time to add an event listener to the DOM element. We will add some code as follows.

Each time you click the ‘+’ or ‘-’ button, the count and action.type will change as follows.

So, how can we update the number ‘0’ in the <span> tag?

We will use the ‘subscribe’ method, which invokes a function whenever the store is modified.

Please add the following code at lines 7, 21, and 25.

We reset the value in the <span> tag to 0 on line 7, and each time we click the '+' or '-' button, 'store.dispatch' will change the action type on lines 28 and 32.

When the action type changes, the reducer function is invoked (line 9) and returns a value based on the condition (the value of ‘type’ on lines 12, 14, or 16). The returned value replaces the previous state in the ‘store,’ triggering the ‘subscribe’ method (line 25). This process calls the ‘onChange’ function within the ‘subscribe’ method, and the ‘onChange’ function updates the number in the <span> tag based on the value in the 'store' state when the user clicks the buttons (line 22).

While Redux may not be practical for vanilla JS applications, it serves as a valuable tool for understanding the fundamental concepts of Redux.

In Part 2, we’ll create a more complex application.