Bereaksi useReducerKait


Kait useReducermirip dengan useStateKait.

Ini memungkinkan logika status kustom.

Jika Anda menemukan diri Anda melacak beberapa bagian negara yang mengandalkan logika kompleks, useReducermungkin berguna.


Sintaksis

Kait useReducer menerima dua argumen.

useReducer(<reducer>, <initialState>)

Fungsi tersebut reducerberisi logika status kustom Anda dan initialStatedapat berupa nilai sederhana tetapi umumnya akan berisi objek.

useReducerHook mengembalikan arus dan statemetode dispatch.

Berikut adalah contoh useReducerdalam aplikasi penghitung:

Contoh:

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'));


Ini hanya logika untuk melacak status lengkap todo.

Semua logika untuk menambah, menghapus, dan menyelesaikan todo dapat dimuat dalam satu useReducerHook dengan menambahkan lebih banyak tindakan.