【react18】如何使用useReducer和useContext来实现一个todoList功能

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

实现效果

实现代码

• 项目工程结构
  
• App.js文件

import logo from "./logo.svg";
import "./App.css";
import TodoLists from "./comps/TodoLists";
import AddItem from "./comps/AddItem";
import todoListsContext from "./comps/todolistContext";
// import { useReducer } from "react";
import { useImmerReducer } from "use-immer";
import FooterCompo from "./comps/FooterCompo";// function todoListsReducer(state, action) {
//   switch (action.type) {
//     case "CHANGE_INPUT_VALUE":
//       return {
//         ...state,
//         inputValue: action.payload,
//       };
//       break;
//     case "ADD_ITEM":
//       return { ...state, todos: [...state.todos, action.payload] };
//       break;
//     default:
//       return state;
//   }
// }
function todoListsReducer(state, action) {switch (action.type) {case "CHANGE_INPUT_VALUE":state.inputValue = action.payload;return state;case "ADD_ITEM":state.todos = [...state.todos, action.payload];return state;case "DONE_ITEM":state.todos = state.todos.map((todo) => {console.log(action, "done");if (todo.id === action.payload.id) {return { ...todo, completed: !action.payload.completed };}return todo;});return state;case "DELETE_ITEM":state.todos = state.todos.filter((todo) => todo.id !== action.payload);return state;default:return state;}
}function App() {// const [store, dispatch] = useReducer(todoListsReducer, {//   inputValue: "",//   todos: [],// });const [store, dispatch] = useImmerReducer(todoListsReducer, {inputValue: "",todos: [],});return (<div className="App"><h1>TodoLists</h1><todoListsContext.Provider value={store}><AddItem dispatch={dispatch} /><TodoLists dispatch={dispatch} /><FooterCompo /></todoListsContext.Provider></div>);
}export default App;

• AddItem组件

import { useContext } from "react";
import todoListsContext from "./todolistContext";
import { v4 as uuid } from "uuid";function AddItem({ dispatch }) {const data = useContext(todoListsContext);const handleChangeInputValue = (e) => {dispatch({type: "CHANGE_INPUT_VALUE",payload: e.target.value,});};const handleAddItem = () => {if (!data.inputValue) {return alert("Please enter a valid item");}dispatch({type: "ADD_ITEM",payload: {id: uuid(),title: data.inputValue,completed: false,},});dispatch({type: "CHANGE_INPUT_VALUE",payload: "",});};return (<div><inputtype="text"value={data.inputValue}placeholder="Enter item name"onChange={handleChangeInputValue}></input><button onClick={handleAddItem}>add list</button></div>);
}export default AddItem;

• FooterCompo组件

import todoListsContext from "./todolistContext";
import { useContext } from "react";
import { useMemo } from "react";
function FooterCompo() {const { todos } = useContext(todoListsContext);const completedCount = useMemo(() => todos.filter((e) => e.completed).length,[todos]);const remain = useMemo(() => todos.length - completedCount,[todos, completedCount]);return (<div><span>all: {todos.length}</span> <span>completed: {completedCount}</span>{" "}<span>todo: {remain}</span></div>);
}export default FooterCompo;

• 使用createContext来创建公共状态

import { createContext } from "react";const todoListsContext = createContext({});export default todoListsContext;

• UI美化

.completed {text-decoration: line-through;color: gray;
}
.todo-list{cursor: pointer;
}.todo-text{margin: auto 10px auto 4px;
}
.del-btn{cursor: pointer;color: gray;
}
.todo-item{text-align: left;}

• TodoLists组件

import { useContext } from "react";
import todoListsContext from "./todolistContext";
import classNames from "classnames";
import "./todoLists.css";function TodoLists({ dispatch }) {const data = useContext(todoListsContext);const handleDoneItem = (item) => {dispatch({ type: "DONE_ITEM", payload: item });};const handleDelItem = (id) => {dispatch({ type: "DELETE_ITEM", payload: id });};return (<><ul>{data.todos.map((todoList) => {return (<li key={todoList.id} className="todo-item"><spanclassName={classNames({completed: todoList.completed,"todo-list": true,})}><inputtype="checkbox"checked={todoList.completed}onChange={() => handleDoneItem(todoList)}/><span className="todo-text">{todoList.title}</span></span><spanclassName={classNames({// completed: todoList.completed,"del-btn": todoList.completed,})}onClick={() => handleDelItem(todoList.id)}>del</span></li>);})}</ul></>);
}
export default TodoLists;