diff --git a/README.md b/README.md index 7778f57..d922c75 100644 --- a/README.md +++ b/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 !!! diff --git a/src/components/TodoList.js b/src/components/TodoList.js index 06bfd15..b4fba37 100644 --- a/src/components/TodoList.js +++ b/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)), diff --git a/src/components/Todos.js b/src/components/Todos.js index ace8ca8..83e51e6 100644 --- a/src/components/Todos.js +++ b/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 (
handleChange(e)} + onChange={event => setTodo(event.target.value)} className="todo-input" value={todo} /> @@ -67,5 +61,4 @@ const Todos = (props) => {
); }; -//we can use connect method to connect this component with redux store export default connect(mapStateToProps, mapDispatchToProps)(Todos); diff --git a/src/reducers/index.js b/src/reducers/index.js index f579aad..b9a7255 100644 --- a/src/reducers/index.js +++ b/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; }); }, },