React useReducer
Hook
Hook useReducer
tương tự như Hook useState
.
Nó cho phép logic trạng thái tùy chỉnh.
Nếu bạn thấy mình đang theo dõi nhiều phần trạng thái dựa trên logic phức tạp, useReducer
có thể hữu ích.
Cú pháp
Hook useReducer chấp nhận hai đối số.
useReducer(<reducer>, <initialState>)
Hàm reducer
chứa logic trạng thái tùy chỉnh của bạn và initialState
có thể là một giá trị đơn giản nhưng nhìn chung sẽ chứa một đối tượng.
Hook useReducer
trả về state
hiện tại và phương thức dispatch
.
Dưới đây là ví dụ về useReducer
trong ứng dụng truy cập:
Ví dụ:
import { useReducer } from "react"; import ReactDOM from "react-dom/client"; const initialTodos = [ { id: 1, title: "Todo 1", complete: false, }, { id: 2, title: "Todo 2", complete: false, }, ]; const reducer = (state, action) => { switch (action.type) { case "COMPLETE": return state.map((todo) => { if (todo.id === action.id) { return { ...todo, complete: !todo.complete }; } else { return todo; } }); default: return state; } }; function Todos() { const [todos, dispatch] = useReducer(reducer, initialTodos); const handleComplete = (todo) => { dispatch({ type: "COMPLETE", id: todo.id }); }; return ( <> {todos.map((todo) => ( <div key={todo.id}> <label> <input type="checkbox" checked={todo.complete} onChange={() => handleComplete(todo)} /> {todo.title} </label> </div> ))} </> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Todos />);
Đây chỉ là logic để theo dõi trạng thái hoàn thành việc cần làm.
Tất cả logic để thêm, xóa và hoàn thành một việc cần làm có thể được chứa trong một useReducer
Hook bằng cách thêm nhiều hành động hơn.