Redux for beginner: Part 2

4 min readMay 9, 2021

In Part 2, we’ll build a more practical application using Redux and vanilla JS. You don’t need to change the workspace setup in VS Code; we will use the same structure we created in Part 1. By creating a to-do list application through this practice, I hope you’ll gain a better understanding of how Redux works.

Let’s add the <h1>, <form>, and <ul> elements to the 'index.html' file as shown below.

In essence, we’ve added a title (<h1> element), a form for adding to-do items, and a section for displaying the list (<ul> element).

Open the ‘index.js’ file and add variables and a reducer function as follows.

We imported ‘createStore’ from the Redux module, defined three elements (form, input, and ul), created a Redux store to hold the state tree, and established a reducer function to return the next state tree based on the current state tree and the action to handle. We’ll set the default value of the state as an empty array because we’ll store the entire to-do list as an array later.

We will need two action types and two functions: ‘addList’ and ‘deleteList.’ I will set the action types in variables and dispatch them in each function. Please add the following code.

ADD_LIST, and DELETE_LIST variables(line 7, 8) have action types.

In the onSubmit function (line 15), when the user clicks the button in the form to add a to-do list item, the ‘store’ will have ‘ADD_LIST’ as the action type.

deleteList function (line 20): When the user clicks on each list item to delete it, the ‘store’ will have ‘DELETE_LIST’ as the action type.

Let’s add additional code to the onSubmit function to ensure it functions correctly.

e.preventDefault(line 25): prevent the page from refreshing.

toDo(line 26): a variable to put list typed from input box.

input.value = “”;(line 27): reset the input box when user clicks add button.

text:toDo(line 28): add text key-value pair to store the list in the “store”.

We will maintain the to-do list as an array in the ‘store’ state. To add to the to-do list in the state, we will utilize the reducer function (line 10). The return value from the reducer function will represent our next state, determined by the condition (action type) we pass to it. We will use the spread operator to add new to-do items because it aligns with the three principles of Redux (https://redux.js.org/understanding/thinking-in-redux/three-principles). If you’re not familiar with how to use the spread operator, you can read this article (https://medium.com/@paulryan17/spread-operator-javascript-a77a890b96eb).

Please add ‘return […state, { text: action.text }];’ on line 13. Here, ‘…state’ represents the current state containing all the to-do items, and ‘{ text: action.text }’ represents the new to-do item that was just typed. In essence, we are returning an array containing all the to-do items, including the newly added one, as the updated state in the ‘store’.

Let’s add ‘store.subscribe(() => { console.log(store.getState()) });’ to verify that all the to-do items are correctly stored in the ‘store’ state.

***The ‘subscribe’ method (a pre-made method) will be triggered every time the state changes.

Run the server with ‘$yarn start’ in your terminal, enter your to-do list item, and click the ‘ADD’ button to check if it works correctly in the developer tool console.

Great! The state now correctly contains all the lists we entered :)

Okay, it’s time to display the lists on our screen. We will add another function, ‘displayToDo,’ and call it within the ‘subscribe’ method as shown below (lines 23–33).”