Frontender Libs - обзор библиотек JS / CSS

Управление состоянием действий

UseActionState - это хук в React, предназначенный для упрощения управления состоянием действий в React-компонентах, который был введен для улучшения существующего хука useFormState.

Использование:

const [state, action] = useActionState({
  initialState: {
    // Начальное состояние
  },
  actions: {
    // Определите действия
    increment: () => {
      // Логика действия
    },
    decrement: () => {
      // Логика действия
    },
  },
});

Пример:

const Counter = () => {
  const [count, actions] = useActionState({
    initialState: { count: 0 },
    actions: {
      increment: () => ({ count: count + 1 }),
      decrement: () => ({ count: count - 1 }),
    },
  });

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={actions.increment}>Увеличить</button>
      <button onClick={actions.decrement}>Уменьшить</button>
    </div>
  );
};

👉 @sWebDev

👍5👎1🔥1

www.tgoop.com/sWebDev/2847

1.88K viewsApr 29, 2024 at 08:11

Управление состоянием действий

UseActionState - это хук в React, предназначенный для упрощения управления состоянием действий в React-компонентах, который был введен для улучшения существующего хука useFormState.

Использование:

const [state, action] = useActionState({
  initialState: {
    // Начальное состояние
  },
  actions: {
    // Определите действия
    increment: () => {
      // Логика действия
    },
    decrement: () => {
      // Логика действия
    },
  },
});

const Counter = () => {
  const [count, actions] = useActionState({
    initialState: { count: 0 },
    actions: {
      increment: () => ({ count: count + 1 }),
      decrement: () => ({ count: count - 1 }),
    },
  });

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={actions.increment}>Увеличить</button>
      <button onClick={actions.decrement}>Уменьшить</button>
    </div>
  );
};

BY Frontender Libs - обзор библиотек JS / CSS