Update README.md

README.md

@@ -1,8 +1,6 @@
 # Guidelines For Developers
 
 Demo Redux Flow
-![image](https://github.com/nguyenvanhuan243/todo-app-redux-docker/assets/13021427/bd27de44-8a0a-4ae3-8d8a-b89e4687e87f)
-
 ![image](https://github.com/nguyenvanhuan243/todo-app-redux-docker/assets/13021427/b6c5f815-cfa4-4a09-9701-9f060bb638ae)
 
 
@@ -25,6 +23,7 @@ Demo Redux Flow
 Set up and run (Not using Docker)
 ```code
 git clone https://github.com/nguyenvanhuan243/todo-app-redux-docker.git
+cd todo-app-redux-docker
 nvm use 16
 npm install
 npm start
@@ -33,6 +32,7 @@ npm start
 Set up and run (Using Docker)
 ```code
 git clone https://github.com/nguyenvanhuan243/todo-app-redux-docker.git
+cd todo-app-redux-docker
 docker-compose up --build
 ```
 
@@ -48,5 +48,8 @@ access: http://localhost:3000/
 - Docker: https://todo-app-docker-kqkm.onrender.com
 - Run on Build: https://todo-app-redux-docker.netlify.app
 
+![image](https://github.com/nguyenvanhuan243/todo-app-redux-docker/assets/13021427/1c5924ca-1193-4452-a9de-830fcb701a9d)
+
+
 ## Conclusion
 - Thanks for reading !!!

src/components/TodoList.js

@@ -9,12 +9,9 @@ import TodoItem from "./TodoItem";
 import { AnimatePresence, motion } from "framer-motion";
 
 const mapStateToProps = state => {
-  return {
-    todos: state,
-  };
+  return { todos: state };
 };
 
-
 const mapDispatchToProps = dispatch => {
   return {
     removeTodo: id => dispatch(removeTodos(id)),

src/components/Todos.js

@@ -6,25 +6,19 @@ import { motion } from "framer-motion";
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-const mapStateToProps = (state) => {
-  return {
-    todos: state,
-  };
+const mapStateToProps = state => {
+  return {todos: state };
 };
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    addTodo: (obj) => dispatch(addTodos(obj)),
+    addTodo: todoInfo => dispatch(addTodos(todoInfo))
   };
 };
 
 const Todos = (props) => {
   const [todo, setTodo] = useState("");
 
-  const handleChange = (e) => {
-    setTodo(e.target.value);
-  };
-
   const add = () => {
     if (todo === "") {
       toast.warning("Todo text can not empty", {
@@ -44,12 +38,12 @@ const Todos = (props) => {
       setTodo("");
     }
   };
-  //console.log("props from store", props);
+
   return (
     <div className="addTodos">
       <input
         type="text"
-        onChange={(e) => handleChange(e)}
+        onChange={event => setTodo(event.target.value)}
         className="todo-input"
         value={todo}
       />
@@ -67,5 +61,4 @@ const Todos = (props) => {
     </div>
   );
 };
-//we can use connect method to connect this component with redux store
 export default connect(mapStateToProps, mapDispatchToProps)(Todos);

src/reducers/index.js

@@ -6,33 +6,21 @@ const addTodoReducer = createSlice({
   initialState,
   reducers: {
     addTodos: (state, action) => {
-      state.push(action.payload);
-      return state;
+      state.push(action.payload)
+      return state
     },
     removeTodos: (state, action) => {
-      return state.filter((item) => item.id !== action.payload);
+      return state.filter((item) => item.id !== action.payload)
     },
     updateTodos: (state, action) => {
-      return state.map((todo) => {
-        if (todo.id === action.payload.id) {
-          return {
-            ...todo,
-            item: action.payload.item,
-          };
-        }
-        console.log(state)
-        return todo;
+      const { id, item } = action.payload;
+      return state.map(todo => {
+        return todo.id === id ? { ...todo, item, } : todo;
       });
     },
     completeTodos: (state, action) => {
-      return state.map((todo) => {
-        if (todo.id === action.payload) {
-          return {
-            ...todo,
-            completed: true,
-          };
-        }
-        return todo;
+      return state.map(todo => {
+        return todo.id === action.payload ? { ...todo, completed: true } : todo;
       });
     },
   },