To do app with React Redux Toolkit

By the end of this blog you will know to setup Redux Toolkit and create To do app. For this tutorial I am assuming you already have knowledge of React.

Why should I use Redux toolkit?

Redux is state management library that allow you to manage state in any front-end framework, and Redux Toolkit makes it easier to write good Redux applications and speeds up development, by baking in our recommended best practices, providing good default behaviors, catching mistakes, and allowing you to write simpler code.

Steps:

2. Install Required packages.

@reduxjs/toolkit react-redux: Redux and Redux toolkit library.

react-icons: Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

3. Create a file named src/store.js. Import the configureStore API from Redux Toolkit. We'll start by creating an empty Redux store, and exporting it.

Once the store is created, we can make it available to our React components by putting a React-Redux <Provider> around our application in src/store.js. Import the Redux store we just created, put a Provider around your <App>, and pass the store as a prop.

5. Create a Redux Slider

Create file name Reducers/todoSlider.js and import createSlider from Redux Toolkit Api.

Slicer requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Slicer allows us define initial state , create action and reducer at same place.

From above code you can observe initial state is define and reducers functions are created to perform add, update and delete operation.

Next, we need to import the reducer function from the counter slice and add it to our store inside src/store.js . By defining a field inside the reducer parameter, we tell the store to use this slice reducer function to handle all updates to that state.

7. Create components and import into app .js

Create a file named src/Components/AddTodo.js.

From above code you can observe Redux hook useDispatch is use to dispatch addToDo action to update state.

Create a file named src/Components/ListTodo.js.

In above component Redux hook useDispatch is use to dispatch deleteToDo, editTodo action and useSelector to get state from reducer.

Import Components into App.js

7.Add styles inside app.css

Output:

Related posts:

We often hear how musical artists don’t earn enough money, but nobody explains how they earn money. Seems obvious — live shows and streaming. But it’s actually more complicated than that. You write…