Make A ToDo App using React and ReduxToolkit
Tags: reduxtoolkit, beginners, programming, tutorial
Published: 2021-11-21 20:39:00

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](https://redux-toolkit.js.org/).

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

![App-Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc0q1hj1e3htv2zmo89w.png)

####Step 1 - Initialize App and Install Dependencies

```console
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.

```console
npm install react-redux @reduxjs/toolkit
```

now run this following command to start the development server

```console
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.

{% gist https://gist.github.com/arunavamodak/ecbb99630ab267db4583a7a0c79fc8f6 file=rtk-todo-taskSlice.js %}

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.

{% gist https://gist.github.com/arunavamodak/ab8245fe08a7701f7fc8cc888d1af0f4 file=rtk-todo-store.js %}

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.

{% gist https://gist.github.com/arunavamodak/87f1ac18822852bd799b319149aabba2 file=rtk-todo-index.js %}

####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.

{% gist https://gist.github.com/arunavamodak/e39b2388944ff4da5d47bf51d27debc5  file=rtk-todo-App.js %}

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

{% gist https://gist.github.com/arunavamodak/5e47592e85ce82feffca43503f06fe87  file=rtk-todo-AddTodo.js %}

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.

{% gist https://gist.github.com/arunavamodak/9795ee830b058502f1454933446d11ee  file=rtk-todo-TodoList.js %}

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

{% gist https://gist.github.com/arunavamodak/e53f0af756a5984720a0de14cac8857c  file=rtk-todo-TodoItem.js %}


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.

![Todo Before CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2z7ig9bhp3seqlr907jl.png)

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.

{% gist https://gist.github.com/arunavamodak/dec1bf4d56692b90e4bf7ecef18e6b14  file=rtk-todo-index.css %}


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

Untill next time Happy Building !! 😎