React useReducer hooki

useReducer hooki useState hookiga o‘xshaydi.

Bu maxsus holat mantig‘iga imkon beradi.

Agar siz murakkab mantiqqa tayanadigan bir nechta holatni kuzatayotgan bo‘lsangiz, useReducer foydali bo‘lishi mumkin.

Sintaksis

useReducer Hook uchta argumentni qabul qiladi.

useReducer(reducer, initialState, init)

reducer funksiyasi sizning shaxsiy holat mantiqingizni o‘z ichiga oladi va initialState oddiy qiymat bo‘lishi mumkin, lekin odatda obyektni o‘z ichiga oladi. init argumenti ixtiyoriy va holatni ishga tushirish uchun ishlatiladi.

useReducer hooki joriy state va dispatch usulini qaytaradi.

Ikki o‘yinchining hisobini kuzatish uchun useReducer-dan foydalanish misoli:

Misol:

import { useReducer } from 'react';
import { createRoot } from 'react-dom/client';

const initialScore = [
  {
    id: 1,
    score: 0,
    name: "John",
  },
  {
    id: 2,
    score: 0,
    name: "Sally",
  },
];

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREASE":
      return state.map((player) => {
        if (player.id === action.id) {
          return { ...player, score: player.score + 1 };
        } else {
          return player;
        }
      });
    default:
      return state;
  }
};

function Score() {
  const [score, dispatch] = useReducer(reducer, initialScore);

  const handleIncrease = (player) => {
    dispatch({ type: "INCREASE", id: player.id });
  };

  return (
    <>
      {score.map((player) => (
        <div key={player.id}>
          <label>
            <input
              type="button"
              onClick={() => handleIncrease(player)}
              value={player.name}
            />
            {player.score}
          </label>
        </div>
      ))}
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Score />
);

Misolni ishga tushirish »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish