Redux Toolkits: Building todo list:

In this article, I want to showcase what I have learnt about the latest techniques that is used to build React/Redux application using the latest Redux toolkit. Let’s start from the beginning and going top-down:

first step:

create a react app utilizing redux template. It install all the necessary template for you to build a redux app fairly easy:

npx create-react-app my-app --template redux

Second step:

Now lets take a look at our root file, index.js:

So far, everything looks familiar for you, but pay specific attention to store that is being imported from store.js and passed as an attribute to the <Provider />:

“configureStore” is simply a friendly abstraction over the standard Redux good old ‘createStore’ function. It adds good defaults to the store setup for a better development experience and reduce the amount of code you need to input into your index.js.

Now, what is these weird looking todoSlice or counterSlice? Let’s focus on just the todoSlice:

For now, pay specific attention to line 1 and line 59 & 60: What is createSlice?

“A function that accepts an initial state(initialState), an object full of reducer functions, and a “slice name”(todos), and automatically generates action creators and action types that correspond to the reducers and state.”

You can see action types that is being exported on line 59 (create,edit, toggleComplete, and remove) and are used in Todo.js file, and reducer function on line 60. The line 60 is used in your store.js file.

Now lets see how these action types are being used in Todo.js file:

on line 2, useSelector is a function that takes the current state as an argument and returns whatever data you want from it.

useDispatch returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions that you are imported from todoSlice.js file

Line 38–70, returns the JSX of the todo form and all the todos that being added as well as buttons that when clicked dispatch an action to the reducer so the store can be manipulated accordingly.

Finally, the Todo.js will be passed down to App.js.

I personally wouldn’t think that the latest update in Redux can make things much easier to understand when dealing with reducers, action creators, and the store, and I highly recommend anyone try to implement this pattern in their React-Redux app!

Happy coding!

Click here for the github repo