**React.js** React.js, often referred to simply as React, is a JavaScript library for building user interfaces. When you build a user interface with React, you will first break it apart into pieces called components. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. **React-Redux** React Redux is a library that provides official bindings to connect React components with Redux, a predictable state container for JavaScript applications. **MUI** MUI (formerly known as Material-UI) is a popular React component library that implements Google’s Material Design. ![Todo App Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd2fgkmvdgw0n18c0xud.png) Set Up Your React App ``` npx create-react-app todo-app ``` Navigate to project directory ``` cd todo-app ``` Install react-redux ``` npx install @redux/toolkit react-redux ``` Install MUI ``` npm install @mui/material @emotion/react @emotion/styled ``` Now you can start the development server by running the following command: ``` npm start ``` **Project folder structures** ![App folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfuoisljm0jlr8g956cq.png) ## Files _index.js_ we will create provider for redux store. ``` \\todo-app\src\index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { Provider } from "react-redux"; import store from "./store/store"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); ``` _App.js_ ``` \todo-app\src\App.js import "./App.css"; import ButtonAddTodo from "./component/ButtonAddTodo"; import InputTodo from "./component/InputTodo"; import ListTodo from "./component/ListTodo"; import { useDispatch, useSelector } from "react-redux"; import { addTask } from "./store/taskStore"; import { useState } from "react"; import { Container, Snackbar, Stack, Typography } from "@mui/material"; function App() { const [inputText, setInputText] = useState(""); const [showSnack, setShowSnack] = useState(false); const todos = useSelector((state) => state); const dispatch = useDispatch(); return ( Todo App { if (inputText.length === 0) { setShowSnack(true); return; } dispatch(addTask({ title: inputText })); setInputText(""); }} /> { setShowSnack(false); }} message="Failed to add, please add something to add todo" /> ); } export default App; ``` _store.js_ we create store and add reducer taskReducer. ``` \\todo-app\src\store\store.js import { configureStore } from "@reduxjs/toolkit"; import { taskReducer } from "./taskStore"; export default configureStore({ reducer: taskReducer }); ``` _taskStore.js_ we createSlice ie. immutable state(shallowcopy) just like [slice ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) does which will be updated by action, passing the initial state and name the slice "task". ``` import { createSlice } from "@reduxjs/toolkit"; const initialState = []; const taskSlice = createSlice({ name: "task", initialState, reducers: { addTask: (state, action) => { state.push({ id: state.length + 1, title: action.payload.title, completed: false }); }, markTaskToggle: (state, action) => { const todo = state.find((item) => item.id === action.payload.id); if (todo) { todo.completed = !todo.completed; //works as still wrapped in proxy. } }, deleteTask: (state, action) => { // console.log("id: " + action.payload.id); // state.splice(action.payload.id - 1, 1); return state.filter((item) => item.id !== action.payload.id); }, isEditable: (state, action) => { const todo = state.find((item) => item.id === action.payload.id); if (todo) { todo.editable = action.payload.editable; //works as still wrapped in proxy. } }, saveTask: (state, action) => { const todo = state.find((item) => item.id === action.payload.id); if (todo) { todo.title = action.payload.title; //works as still wrapped in proxy. } } } }); export const { addTask, markTaskToggle, deleteTask, isEditable, saveTask } = taskSlice.actions; export const taskReducer = taskSlice.reducer; ``` _ButtonAddTodo.js_ ``` \\todo-app\src\component\ButtonAddTodo.js import { Button } from "@mui/material"; import { memo } from "react"; const ButtonAddTodo = ({ handleAdd }) => { return ( <> ); }; export default memo(ButtonAddTodo); ``` _InputTodo.js_ ``` \todo-app\src\component\InputTodo.js import { useDispatch } from "react-redux"; import { addTask } from "../store/taskStore"; import { TextField } from "@mui/material"; const InputTodo = ({ inputText, setInputText }) => { const dispatch = useDispatch(); const handleInput = (e) => { setInputText(e.target.value); }; return ( <> { if (e.key === "Enter") { dispatch(addTask({ title: inputText })); setInputText(""); } }} /> ); }; export default InputTodo; ``` _ListTodo.js_ ``` \todo-app\src\component\ListTodo.js import { useDispatch } from "react-redux"; import { deleteTask, markTaskToggle, isEditable, saveTask } from "../store/taskStore"; import { Button, Checkbox, Stack, TextField, Typography } from "@mui/material"; import { useRef, useState } from "react"; const ListTodos = ({ todos }) => { const dispatch = useDispatch(); const [editText, setEditText] = useState(""); const editEnabledIdRef = useRef(null); function handleSave(item) { dispatch(saveTask({ id: item.id, title: editText })); dispatch(isEditable({ id: item.id, isEditable: false })); } return ( <> {todos.map((item) => { return ( { console.log("item id " + item.id); dispatch(markTaskToggle({ id: item.id })); }} /> {item.editable ? ( { if (e.key === "Enter") { handleSave(item); } }} value={editText} onChange={(e) => { setEditText(e.target.value); }} onDoubleClick={() => { dispatch(isEditable({ id: item.id, editable: false })); }} variant={"outlined"} placeholder={item.completed ? ~~{item.title}~~ : item.title} style={{ flex: 1, alignSelf: "center" }} /> ) : ( { if (editEnabledIdRef.current) { dispatch( isEditable({ id: editEnabledIdRef.current, editable: false }) ); } dispatch(isEditable({ id: item.id, editable: true })); editEnabledIdRef.current = item.id; setEditText(item.title); }} > {item.completed ? ~~{item.title}~~ : item.title} )} {item.editable ? ( ) : ( )} ); })} ); }; export default ListTodos; ``` [Github code](https://github.com/xitize/todo-app)

xitize

Todo App with React.js React-Redux and MUI

Join Our Newsletter. No Spam, Only the good stuff.