【react18】怎样利用useReducer和useContext来实现一个todoList功能

重点知识点就是利用useReducer来攻坚小型的公共状态管理，useImmerReducer来实现数据的不可变
实现效果

实当代码

• 项目工程布局
  
  
  
  
• App.js文件
  

1. import logo from "./logo.svg";
2. import "./App.css";
3. import TodoLists from "./comps/TodoLists";
4. import AddItem from "./comps/AddItem";
5. import todoListsContext from "./comps/todolistContext";
6. // import { useReducer } from "react";
7. import { useImmerReducer } from "use-immer";
8. import FooterCompo from "./comps/FooterCompo";
10. // function todoListsReducer(state, action) {
11. //   switch (action.type) {
12. //     case "CHANGE_INPUT_VALUE":
13. //       return {
14. //         ...state,
15. //         inputValue: action.payload,
16. //       };
17. //       break;
18. //     case "ADD_ITEM":
19. //       return { ...state, todos: [...state.todos, action.payload] };
20. //       break;
21. //     default:
22. //       return state;
23. //   }
24. // }
25. function todoListsReducer(state, action) {
26.   switch (action.type) {
27.     case "CHANGE_INPUT_VALUE":
28.       state.inputValue = action.payload;
29.       return state;
31.     case "ADD_ITEM":
32.       state.todos = [...state.todos, action.payload];
33.       return state;
35.     case "DONE_ITEM":
36.       state.todos = state.todos.map((todo) => {
37.         console.log(action, "done");
38.         if (todo.id === action.payload.id) {
39.           return { ...todo, completed: !action.payload.completed };
40.         }
41.         return todo;
42.       });
43.       return state;
45.     case "DELETE_ITEM":
46.       state.todos = state.todos.filter((todo) => todo.id !== action.payload);
47.       return state;
49.     default:
50.       return state;
51.   }
52. }
54. function App() {
55.   // const [store, dispatch] = useReducer(todoListsReducer, {
56.   //   inputValue: "",
57.   //   todos: [],
58.   // });
59.   const [store, dispatch] = useImmerReducer(todoListsReducer, {
60.     inputValue: "",
61.     todos: [],
62.   });
63.   return (
64.     <div className="App">
65.       <h1>TodoLists</h1>
66.       <todoListsContext.Provider value={store}>
67.         <AddItem dispatch={dispatch} />
68.         <TodoLists dispatch={dispatch} />
69.         <FooterCompo />
70.       </todoListsContext.Provider>
71.     </div>
72.   );
73. }
75. export default App;

复制代码

• AddItem组件
  

1. import { useContext } from "react";
2. import todoListsContext from "./todolistContext";
3. import { v4 as uuid } from "uuid";
5. function AddItem({ dispatch }) {
6.   const data = useContext(todoListsContext);
7.   const handleChangeInputValue = (e) => {
8.     dispatch({
9.       type: "CHANGE_INPUT_VALUE",
10.       payload: e.target.value,
11.     });
12.   };
13.   const handleAddItem = () => {
14.     if (!data.inputValue) {
15.       return alert("Please enter a valid item");
16.     }
17.     dispatch({
18.       type: "ADD_ITEM",
19.       payload: {
20.         id: uuid(),
21.         title: data.inputValue,
22.         completed: false,
23.       },
24.     });
25.     dispatch({
26.       type: "CHANGE_INPUT_VALUE",
27.       payload: "",
28.     });
29.   };
30.   return (
31.     <div>
32.       <input
33.         type="text"
34.         value={data.inputValue}
35.         placeholder="Enter item name"
36.         onChange={handleChangeInputValue}
37.       ></input>
38.       <button onClick={handleAddItem}>add list</button>
39.     </div>
40.   );
41. }
43. export default AddItem;

复制代码

• FooterCompo组件
  

1. import todoListsContext from "./todolistContext";
2. import { useContext } from "react";
3. import { useMemo } from "react";
4. function FooterCompo() {
5.   const { todos } = useContext(todoListsContext);
6.   const completedCount = useMemo(
7.     () => todos.filter((e) => e.completed).length,
8.     [todos]
9.   );
10.   const remain = useMemo(
11.     () => todos.length - completedCount,
12.     [todos, completedCount]
13.   );
14.   return (
15.     <div>
16.       <span>all: {todos.length}</span> <span>completed: {completedCount}</span>{" "}
17.       <span>todo: {remain}</span>
18.     </div>
19.   );
20. }
22. export default FooterCompo;

复制代码

• 利用createContext来创建公共状态
  

1. import { createContext } from "react";
3. const todoListsContext = createContext({});
5. export default todoListsContext;

复制代码

• UI美化
  

1. .completed {
2.     text-decoration: line-through;
3.     color: gray;
4. }
5. .todo-list{
6.   cursor: pointer;
7. }
9. .todo-text{
10.   margin: auto 10px auto 4px;
11. }
12. .del-btn{
13.   cursor: pointer;
14.   color: gray;
15. }
16. .todo-item{
17.   text-align: left;
19. }

复制代码

• TodoLists组件
  

1. import { useContext } from "react";
2. import todoListsContext from "./todolistContext";
3. import classNames from "classnames";
4. import "./todoLists.css";
6. function TodoLists({ dispatch }) {
7.   const data = useContext(todoListsContext);
8.   const handleDoneItem = (item) => {
9.     dispatch({ type: "DONE_ITEM", payload: item });
10.   };
11.   const handleDelItem = (id) => {
12.     dispatch({ type: "DELETE_ITEM", payload: id });
13.   };
14.   return (
15.     <>
16.       <ul>
17.         {data.todos.map((todoList) => {
18.           return (
19.             <li key={todoList.id} className="todo-item">
20.               <span
21.                 className={classNames({
22.                   completed: todoList.completed,
23.                   "todo-list": true,
24.                 })}
25.               >
26.                 <input
27.                   type="checkbox"
28.                   checked={todoList.completed}
29.                   onChange={() => handleDoneItem(todoList)}
30.                 />
31.                 <span className="todo-text">{todoList.title}</span>
32.               </span>
33.               <span
34.                 className={classNames({
35.                   // completed: todoList.completed,
36.                   "del-btn": todoList.completed,
37.                 })}
38.                 onClick={() => handleDelItem(todoList.id)}
39.               >
40.                 del
41.               </span>
42.             </li>
43.           );
44.         })}
45.       </ul>
46.     </>
47.   );
48. }
49. export default TodoLists;

复制代码