How to get started with React and redux-toolkit?

In this article, we are going to learn about how to implement a react app using advanced state management tool redux-toolkit. This article will guide you through the basic implementation of todo app and the crud operations using redux.

Check out the hosted todo application by clicking the following link:

Todo's

Hosted using “gh-pages”.

I hope that everyone who landed on this article will know the basics of react. In case if anybody missed out, please check out the following link

Getting Started - React

First of all, we need to create a new react app using the boilerplate command and install the required dependencies and packages.

npx create-react-app redux-workout
cd redux-workout
npm start

For dependencies, I am providing the following snippet :

I will explain each dependency in the upcoming section. For now, these are the dependencies we are going to work on.

For the easiest styling, I used a CSS framework called tailwindcss. Many of you may or may not know about it. To implement it with the initial kickstart, Please follow the guidelines mentioned in the docs,

https://tailwindcss.com/docs/guides/create-react-app

As far I used it, I feel very helpful with the tailwind utility classes, hope you all get the same. It decreases the native time-consuming methods comprised of external and internal CSS styling.

Let's get started with the main thing “Redux”. To understand the complete working flow of redux-toolkit, please find the following link helpful,

Redux Toolkit | Redux Toolkit

Folder Architecture

/src
--/store
----/index.js
----/todo
------/slice.js
------/saga.js
/App.js
/index.js

Slice

We start with creating our initial slice.js file under the /store folder:

In this todo example, we are using local storage to reduce complications and to achieve the easiest implementation.

Initially, we are creating our state with the values fetched from localStorage having key value “todo”. If nothing fetched from the localStorage then the state is initialized to an empty array ”[ ]”.

To create our slice we are using the “createSlice” hook from /redux-toolkit.

From the above snippet, you can understand that the slice will accept three parameters: name, initialState, and reducers.

Reducers

Each reducer is a function that can accept two parameters, the state, and an action. The state is the initial root state which is stored in the redux-store and get accessed by our application. According to the action type, we can assign the action payload directly to the state variable. It is nothing, but like default “setState”. After the successful assignment of the state variable, it will get updated in the redux-store and also in all the places wherever the state variable used in the application. This is the main advantage of redux where changing one state variable will reflect in all the places.

That's it, now you are a master of redux (::LOL::).

Sagas

Let's jump to the second step, the saga.

Create the saga.js file in the same /store folder where the slice file was created.

The sagas are the triggers that will dispatch the responsible action.

Confusing right? Let's put it in a simple way.

As long as you see, we are trying to create a CRUD method for creating, reading, updating, and deleting our todo’s. Our OnClick event in our HTML component will trigger the assigned async saga function, which will process the received params and dispatch an action imported from the slice with the required params.

Cool Right?

Let's connect our created slice and sage to the store.

Create an index.js file at the root of /store directory.

The “combineReducers” hooks from redux will combine all the exported reducers from slice into a common one, which will be then passed into “configureStore” hooks from the toolkit.

Connecting our Store to the root of the application

src/index.js

As you can see, we imported the store from /store/index.js and assigned it to the “provider” react-redux hook which will be holding up our application state at the root level.

Finally, we had set up our base where we can start laying our application.

Let's start with App.js, delete all the boilerplate code, and copy-paste the following code snippet.

In this file, I have created a basic CRUD structure with validation. Once the user typed something and hits the add button, the onClick event will dispatch the “addTodo” saga along with the typed value. Once the control reaches the saga , it will dispatch the particular reducer with action payLoad responsible for the action, then the slice updates the initialState with the received action payLoad and also saves it in the localStorage.

If the user refreshes the screen, the intialState will get assigned to the value fetched from the localStorage, so that the value is maintained across the application.

As you can find, I didn't use any external CSS. I have used tailwindCSS to style my application.

That's it, you are ready to go.

OUTPUT

TODO

Adding new todo

Updating an existing todo

Thanks to all the passionate developers who have reached the end of article. I hope you all find it very useful.

Please leave all your thoughts in the comment section and feel free to ask any doubts.

GitHub repo : https://github.com/jeevanantham123/redux-workout

Any suggestions regarding improvement and development will be welcomed.