Make A ToDo App using React and ReduxToolkit

In this article we will learn the very basics of redux toolkit and make a simple app using react and redux toolkit. I have kept it very simple with respect to styling, using a little bit css, but you guys can choose whatever you need for styling.

What Is Redux ?

Redux is an open-source JavaScript library for managing and centralizing application state. It helps us to write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React.

What Is RTK And Why Do We Need It ?

According to the official documentation,

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.

It was originally created to help address three common concerns about Redux:

• "Configuring a Redux store is too complicated"
• "I have to add a lot of packages to get Redux to do anything useful"
• "Redux requires too much boilerplate code"

You can read more about redux toolkit here.

So, lets take a peek at what we are looking to build

Step 1 - Initialize App and Install Dependencies

npx create-react-app rtk-todo --use-npm

this step initializes a basic react-app for you using npm. Next you need to install the dependencies.

npm install react-redux @reduxjs/toolkit

now run this following command to start the development server

npm start

Step 2 - Setup Your Folder Structure

Create a structure like this inside the src of your project, we will create our components in the components folder and put all store related stuff inside the redux folder.

📦src
┣ 📂components
┃ ┣ 📜AddTodo.js
┃ ┣ 📜TodoItem.js
┃ ┗ 📜TodoList.js
┣ 📂redux
┃ ┣ 📜store.js
┃ ┗ 📜tasksSlice.js
┣ 📜App.js
┣ 📜index.css
┗ 📜index.js

Step 3 - Redux

Configuring a Redux is an extremely simple process with Redux toolkit. Let's start with writing our first slice.

Here we are using createSlice, it takes a 'slice name', 'initial state' and an object of reducers, and then generates corresponding action generators and action creators to reducers, and each reducer has access to the state and the action.

Then using this we need to configure out store. For that we need to use configueStore. It is an abstraction over the standard Redux createStore function adding some defaults easing our setup process.

Here we pass the slice reducer we created.

Note : If there is one function (like in our case), it is considered as the root reducer. If we have more than one a rootReducer is created behind the scenes, using the combineReducers functionality.

Next we just use this store in our index.js, like we used to do in normal redux.

Step 4 - UI Components

Before building any UI, we should always visualize our component tree. In this app too we would follow a structure something like this.

App
┣ AddTodo
┗ TodoList
┗ TodoItem

In App.js we just call our components and wrap them together.

Next, we make a way to enter the task and dispatch the addTask action.

We can easily import the action from the slice and dispatch it using the useDispatch function.

Now that we can add the task we need to display them. For that we can just access the state using useSelector and map over the todo list to display as we want.

Almost done, we just need to display each task and call the deleteTask action just like we had called the addTask action.

So now if we try to check the progress, we can see that we can add or delete any task and it looks like this, and its quite bad.

So now we add the styles, for this tutorial I have only added basic CSS, but you guys can go wild, maybe use a UI framework like Antd or MaterialUI too, would surely look nice.

And thats done, it looks excatly like we aimed it to be.

Untill next time Happy Building !! 😎