Tepki useReducer
Kancası
Kanca , useReducer
Kancaya benzer useState
.
Özel durum mantığına izin verir.
Kendinizi karmaşık mantığa dayanan birden çok durum parçasını takip ederken bulursanız, useReducer
faydalı olabilir.
Sözdizimi
useReducer Hook iki argümanı kabul eder.
useReducer(<reducer>, <initialState>)
İşlev reducer
, özel durum mantığınızı içerir ve initialState
basit bir değer olabilir, ancak genellikle bir nesne içerir.
Kanca, akımı ve bir yöntemi useReducer
döndürür .state
dispatch
İşte useReducer
bir sayaç uygulamasında bir örnek:
Örnek:
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'));
Bu sadece yapılacaklar tam durumunu takip etme mantığıdır.
Bir yapılacakları ekleme, silme ve tamamlama mantığının tümü,
useReducer
daha fazla eylem eklenerek tek bir Kanca içinde bulunabilir.