I know building TODO List won't always get you too far😴, but it can teach you basic concepts and implementation of a particular framework. Here is the demo of what we're going to build in this tutorial.👇👇 Link: https://react-redux-todo-app-lac.vercel.app/ Now please, if you're starting this tutorial watch till the end because doing it half won't teach you anything. So let's dig in.🤩 In this tutorial, we're going to build this TODO app with animations using Framer-Motion. What will you learn after this Tutorial? How to use Redux Toolkit How to use Framer-Motion for awesome animations Method to sort and display lists CRUD operation (obviously🤭) If you prefer to code along with the same steps while listing to music you can watch this video 👀: You must have basic understanding of Redux to follow this tutorial, don't worry if you don't know the basics of Redux you can visit my channel, there is playlist to learn redux. Let's Get Started First, below is the folder structure for this small project so make sure you create it. Folder Structure |--redux(folder)
   |--reducer.js (here we will create actions and reducer)
   |--store.js
|--components(folder)
   |--Todos.js
   |--TodoItem.js
    --DisplayTodos.js
|--css(folder)
   |--main.css src Follow the below commands to create the react-app and install the required libraries! cd your-app-name
npm install react-redux @reduxjs/toolkit framer-motion react-icons npx create-react-app your-app-name We're going to use all four libraries; react-icons is to add svg files in our app. First, let's add one input and add a button in the . Todos.js setTodo(e.target.value);
  }; );
}; import React, { useState } from "react" ; const Todos = ( props ) => { const [todo, setTodo] = useState( "" ); const handleChange = ( e ) => { return ( < div className = "addTodos" > < input type = "text" onChange = {(e) => handleChange(e)} className="todo-input" value={todo} /> < button className = "add-btn" > Add </ button > < br /> </ div > export default Todos; As you can see in the above code it has one input with handleChange() method and one add button. Creating Reducer and Store Now, let's create our Reducer and actions. Open file and write the below code: reducer.js initialState, state.push(action.payload); },
   
  },
  
}); import { createSlice } from "@reduxjs/toolkit" ; const initialState = []; const addTodoReducer = createSlice({ name : "todos" , reducers : { //here we will write our reducer //Adding todos addTodos : ( state, action ) => { return state; export const { addTodos } = addTodoReducer.actions; export const reducer = addTodoReducer.reducer; Explanation: Now here we're going to use function. createSlice() This function takes 1 object having 3 parameters, --> name of the slice function --> initial State --> All reducer logic inside reducers {} object import createSlice function. Line 1: create initial state here it is an empty array. Line 2: Here we have used createSlice function and passed all 3 required parameters. Line 3: I have created one action called This action gets a callback function that has two arguments (state, action). Then, this function will return state with adding action.payload (payload contains one todo item). addTodos. Here we have exported addTodos as action from addTodoReducer. and we have exported reducer from addTodoReducer. Last two lines: So, let's create our store and pass this reducer. Open store.js and write the below code: }); import { configureStore } from "@reduxjs/toolkit" ; import { reducer } from "./reducer" ; const store = configureStore({ reducer : reducer, export default store; In the above code, we have used the function. configureStore This function takes one reducer and automatically takes care of the Redux DevTools extension so we don't have to write about it explicitly. Now, our store is ready with the reducer that we have created. Connecting Redux Store with React App Let's connect this store to our React application. I like to connect the store in the index.js file. Open index.js file. Import the from the and store from store.js. Provider react-redux import { Provider } from "react-redux" ; import store from "./redux/store" ; Now, just wrap your component with this Provider and pass store in the Provider just like this: <App/> ); ReactDOM.render( < React.StrictMode > //Just like below 👇 < Provider store = {store} > < App /> </ Provider > </ React.StrictMode > , document .getElementById( "root" ) Now, our Redux store is connected with our React App. Connect React component with Redux Let's use this store and Redux functionalities in the component. Todos.js To connect this component with Redux we will use method from . connect() react-redux Open file. Todos.js Import connect method from react-redux. import { connect } from "react-redux" ; Now, instead of simple `export default Todos` change it to this line: export default connect( null , null )(Todos); This is how we use connect method. It's like the higher-order function that takes your component (Todos in our case) and adds redux functionalities to it then returns it. Now, add props in your component and log this props you will see and Object having dispatch method. This means your component is now connected with Redux. Let's use todos state in our component. To use state from redux we have to pass method in the connect method. mapStateToProps and to use actions or functions that we created inside the reducer (like addTodos) we have to create and pass method and add it to the connect method. mapDispatchToProps So, let's create both of these methods in the component. Todos.js };
}; const mapStateToProps = ( state ) => { return { todos : state, This method takes the state as an argument and will return the state as we want here I want to state as todos. };
}; const mapDispatchToProps = ( dispatch ) => { return { addTodo : ( obj ) => dispatch(addTodos(obj)), This method takes dispatch as an argument and it can dispatch an action to the reducer. Here, I want to add todos so this method returns and addTodo method. addTodo method dispatch an addTodos action with an obj (which contains todo item, it will acts as action.payload ). Here, make sure to import addTodos action from reducer file. Now, add both of these methods in the connect just like this: export default connect(mapStateToProps,mapDispatchToProps)(Todos); let's connect input and add button with this state and methods. Here I have created add function. First, it will check if the todo state is not empty if it is empty then shows an alert else it will use addTodo method from props. In this method, we will pass todo object which contains , text, boolean which is initially false. Line 23: id todo completed Make sure to connect add() with onClick of a button. Line 50: here I have mapped values from todos state. Line 55: If todos.length > 0 then it will map it and shows all todo items you add. You can also use Redux DevTools Extension to see actions and state. Add All operations in the Reducer Let's add all the required operations in the reducer. removeTodos will filterout items whose id is the same as action.payload. (which means while using this action we will pass id as payload). Line 16: updateTodos is used to change todo text or todo.item. It will check if id is the same as passed in action.payload, then it will return all other properties of the item and change the text of todos with the passed value. Line 20: completeTodos will change the completed boolean value of particular item to true. Line 32: Make sure to export all the required todo actions. Line 46: Now we will use all these actions. Let's separate the display todos component from file. Remove list from it and let's add it in the DisplayTodo item component. Todos.js ul Before creating component, first, let's create component. DisplayTodos.js TodoItem.js So, open file and write the below code. TodoItem.js Don't read this code, First read the explanation. Now as you saw in the demo each todo item contains 3 buttons , , and . and 3 methods connected with these buttons. edit complete delete This contains the import of icons from the react-icons library, we will use these icons in the edit, update and remove buttons. Line 2 & 3: These are the all required items that we have to pass while displaying component. Line 7: TodoItem item --> contains all the data of single todo item updateTodo --> Method to update todo completeTodo --> method to set todo is completed removeTodo --> method to remove todo item Here in the return Inside this element you can see, Line 23: li --> it shows the todo text as the default value. textarea --> after the text area, there are 3 buttons that contain icons for edit, update and remove, these buttons are connected with all required methods. buttons --> after these buttons there is one span element that shows done, and it will display only when item.completed is true. span It is a ref which is connected with . Its value is true. Line 9: textarea here, we have used ref value for the disabled attribute, which means while ref is true until then stays disabled. Line 30: textarea This change Function will enable the and adds focus on it. This function is connected with the *edit* button. Line 11: textarea This function is used to update the value of the todo item. It will take 3 arguments, id, updated value, and event. Then when you press the enter key then it will call the method and pass all required things as object and disable the textarea. It is connected on in the textarea at . Line 16: updateTodo onKeyPress Line 32 This remove button is connected with the remove method. we have to pass id of the item we want to remove in this method. Line 48: Now let's use this component inside the file. DisplayTodos.js open and write the below code. DisplayTodos.js Make sure to import component in the file right after the component. DisplayTodos.js App.js Todos Contains all the required imports. Line 1-9: we have already discussed both of these methods. Both of these methods must be passed in the connect method. One of them is to map state to props while the other method contains all the required methods to dispatch particular actions. Line 12 & 18: This state is for those 3 buttons which are active, completed, and all. It is initialised with "active". Line 28: This div contains all 3 buttons and onClick of these buttons *sort* state gets changed based on the button it's values can be "active", "completed", or "all". Line 31: In this element we're rendering 3 different lists based on conditions like, Line 53: ul Renders active todo items when (item.completed === false) and (sort === "active") --> Renders completed todo items when (item.completed === true) and (sort === "completed") --> Renders all todo items when (sort === "all") --> This contains all the data that we need to pass in the component. Line 61-65: TodoItem Now for the Framer-motion and CSS part you can watch the video or read the code from github repository. (It will be more easier to understand when you watch the video then writing here about css and animations ) Full Code of this Tutorial can be found: https://github.com/codebucks27/React-Redux-Todo-App That's the end of this whole Tutorial. 😄 If you're confused about anything related to this topic, feel free to ask me 😉! Also, if you want to learn the Basics of Redux, then please do visit my channel. Thanks For Reading and Supporting.😄 My YouTube channel: @CodeBucks Follow me on Instagram where I'm sharing lots of useful tools and resources! @code.bucks 😉

Instagram

YouTube

ReactJS Custom Modal Component using Hooks and Portals

Higher Order Components (HOC) In React: Beginners Guide

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

2021 - HackerNoon Contributor of the Year - CSS3

Too Long; Didn't Read

Make resilience your competitive advantage

A Tutorial for Todo Apps using React, Redux and Framer-Motion

A Tutorial for Todo Apps using React, Redux and Framer-Motion

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Here's How Developers Can Build Their Own Personal Brand

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

Here's How Developers Can Build Their Own Personal Brand

10 security tips for frontend developers

10+ Ridiculously Cool Admin Themes And Templates

10 Best Practices for Every React Developer

12 JavaScript Concepts That Will Level Up Your Development Skills

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps