Управление состояниями в React очень быстро с помощью Zustand

Введение

Привет всем,
В этом уроке мы собираемся реализовать Zustand, которая является удивительной библиотекой управления состояниями React.

Предварительный обзор того, что мы будем создавать в этом уроке —

Начальная установка

Итак, чтобы начать работу с этим учебником, мы собираемся сделать некоторые начальные настройки, которые представляют собой приложение Next.js с TailwindCSS & NextUI.

Итак, давайте создадим наше приложение Next.js.

npx create-next-app your-project-name

Затем мы зайдем в наш проект, а затем установим tailwindCSS.

Для установки TailwindCSS в ваш проект вы можете следовать этому руководству по установке.
Руководство по установке — https://tailwindcss.com/docs/guides/nextjs

Итак, как только мы установили TailwindCSS.

Давайте установим NextUI с помощью этой команды: npm install @nextui-org/react.

Итак, теперь у нас есть все необходимое, чтобы следовать этому руководству.

Давайте перейдем к index.js нашего приложения и создадим пользовательский интерфейс для нашего приложения.

Index.js

import { Button, Input, Card } from "@nextui-org/react";
import {useState} from "react";

export default function Home() {
 const [newtodo, setNewTodo] = useState("");

  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        />
        <Button shadow className="m-2">
          ADD
        </Button>
      </div>
        <div className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>Todo One</Card.Body>
          </Card>
          <Button
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>

    </div>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

На экране у нас будет что-то вроде этого —

Реализация Zustand

Давайте теперь добавим Zustand в наше приложение,
для этого нам нужно создать store.js внутри нашего приложения.

В нашем магазине у нас будет три вещи

todos:[]: этот массив поможет нам отслеживать все тодосы и поможет нам в рендеринге тодосов.

addTodo: addTodo поможет нам добавить новый todo в наш массив todos. Он принимает todo в качестве аргумента, распространяет предыдущее состояние (...state.todos) и добавляет новый todo в конец.

removeTodo: эта функция поможет нам в удалении определенного todo с заданным индексом.

вот код для нашего store.js

import create from "zustand";

const useStore = create((set) => ({
  todos: [],
  todo: "",
  addTodo: (todo) => set((state) => ({ todos: [...state.todos, todo] })),
  removeTodo: (index) =>
    set((state) => ({ todos: state.todos.filter((_, i) => i !== index) })),
}));

export default useStore;

Вход в полноэкранный режим Выход из полноэкранного режима

Итак, теперь у нас есть наш магазин.
Давайте свяжем все и используем его в нашем приложении.

вернитесь к index.js

и импортируйте useStore из «../store.js».

import useStore from "../store";
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, теперь у нас есть импортированный магазин, давайте получим наши текущие todos, и функции для обработки всей логики.


  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

Вход в полноэкранный режим Выход из полноэкранного режима

Давайте подключим все и посмотрим, работает все или нет.

index.js.

import { Button, Input, Card } from "@nextui-org/react";
import { useState } from "react";
import useStore from "../store";
export default function Home() {
  const [newtodo, setNewTodo] = useState("");

  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

// this function will check if the input is valid or not
  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };


  return (
    <div className="container text-black mx-auto flex flex-col items-center p-28">
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>

// Map all the current Todos
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}

Войти в полноэкранный режим Выход из полноэкранного режима

После подключения всех вещей, мы сможем создавать новые todo и удалять todo.

УДИВИТЕЛЬНО!

Теперь у нас есть Zustand, работающий в нашем приложении.

Бонус

Эта часть нашего приложения совершенно необязательна.
Вы можете пройти через нее, если хотите открыть для себя классную библиотеку анимации, которая поможет вам добавить анимацию с помощью всего 3 строк кода.

Давайте начнем,

Итак, мы хотим сделать наше приложение «Дела» более удивительным, добавив в него классную анимацию.
Для этого мы будем использовать auto-animate, это удивительная библиотека анимации от formkit.

Мы собираемся импортировать useEffect, useRef из react & auto-animate из @formkit/auto-animate.

после их импорта,

создайте ссылку с любым именем, я называю ее parent.

const parent = useRef(null);
Вход в полноэкранный режим Выйти из полноэкранного режима

После этого в нашем хуке useEffect мы добавим parent в качестве зависимости и передадим parent.current в autoAnimate.

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

Вход в полноэкранный режим Выйти из полноэкранного режима

Итак, последнее, что нам нужно сделать, это добавить ссылку на наш родительский элемент.

Вот как будет выглядеть весь наш код —

index.js

import { Button, Input, Card } from "@nextui-org/react";
import { useEffect, useState, useRef } from "react";
import useStore from "../store";
import autoAnimate from "@formkit/auto-animate";
export default function Home() {
  const parent = useRef(null);
  const [newtodo, setNewTodo] = useState("");
  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const removeTodo = useStore((state) => state.removeTodo);

  const AddNewTodo = () => {
    if (newtodo.length > 0) {
      addTodo(newtodo);
      setNewTodo("");
    }
  };

  useEffect(() => {
    parent.current && autoAnimate(parent.current);
  }, [parent]);

  return (
    <div
      className="container text-black mx-auto flex flex-col items-center p-28"
// here we are using our parent ref
      ref={parent}
    >
      <div className="w-full">
        <h1 className="text-3xl">Todo</h1>
      </div>
      <div className="mt-2 flex items-center w-full">
        <Input
          value={newtodo}
          onChange={(e) => setNewTodo(e.target.value)}
          fullWidth
          placeholder="Enter TODO"
          clearable
        ></Input>
        <Button onClick={AddNewTodo} shadow className="m-2">
          ADD
        </Button>
      </div>
      {todos.map((todo, index) => (
        <div key={index} className="mt-5 w-full flex items-center">
          <Card className="w-full">
            <Card.Body>{todo}</Card.Body>
          </Card>
          <Button
            onClick={() => removeTodo(index)}
            size="lg"
            shadow
            auto
            color="error"
            className="m-2"
          >
            Delete
          </Button>
        </div>
      ))}
    </div>
  );
}


Войти в полноэкранный режим Выход из полноэкранного режима

Теперь, если вы попробуете добавить и удалить todo, вы увидите несколько классных анимаций.

Github Repo — https://github.com/chetanverma16/Zustand-tutorial

Заключение —

Вот и все, что у меня есть для вас! Надеюсь, вы узнали что-то новое.

Если вам понравилась эта статья, оставьте ❤️, чтобы другие тоже смогли ее найти.

Чтобы получить больше подобного контента, оставайтесь на связи в Twitter

Свяжитесь со мной:

Портфолио | Github | LinkedIn | Twitter

Оцените статью
devanswers.ru
Добавить комментарий