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 ?
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
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.
┃ ┣ 📜AddTodo.js
┃ ┣ 📜TodoItem.js
┃ ┗ 📜TodoList.js
┃ ┣ 📜store.js
┃ ┗ 📜tasksSlice.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
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.
In App.js we just call our components and wrap them together.
Next, we make a way to enter the task and dispatch the
We can easily import the action from the slice and dispatch it using the
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
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 !! 😎
Oldest comments (2)
In case you want to compare codes while building this, here is the code for this,
Delete not working