React useReducerHook
useReducerHook tương tự như useStateHook .
Nó cho phép logic trạng thái tùy chỉnh.
Nếu bạn thấy mình theo dõi nhiều phần trạng thái dựa trên logic phức tạp, useReducercó thể hữu ích.
Cú pháp
UseReducer Hook chấp nhận hai đối số.
useReducer (<reducer>, <initialState>)
Hàm reducerchứa logic trạng thái tùy chỉnh của bạn và initialStatecó thể là một giá trị đơn giản nhưng nói chung sẽ chứa một đối tượng.
useReducerHook trả về hiện tại và statemột dispatchphương thức.
Đây là một ví dụ về useReducerứng dụng truy cập:
Thí dụ:
import { useReducer } from "react";
import ReactDOM from "react-dom";
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>
))}
</>
);
}
ReactDOM.render(<Todos />, document.getElementById('root'));
Đâ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
useReducerHook duy nhất bằng cách thêm nhiều hành động hơn.