Zustand

Начинаем с React и Zustand

Давайте посмотрим, как Zustand работает с React. Чтобы продемонстрировать его возможности, я создам небольшое приложение Pokemon. Это приложение состоит из хранилища, компонента списка и формы ввода, которая обрабатывает ввод пользователя.

Шаг 1. Установка

Установка Zustand так же проста, как установка любого из пакетов npm. Давайте установим его с помощью npm или yarn.

npm install zustand
yarn add zustand

Шаг 2. Создаём хранилище

Далее давайте создадим хранилище, как и в любой другой библиотеке управления состоянием.

import create from "zustand";
const useStore = create((set) => ({
pokemons: [{ id: 1, name: "Bulbasaur" },
 { id: 2, name: "Ivysaur" },
 { id: 3, name: "Venusaur" },
 { id: 4, name: "Charmander" },
 { id: 5, name: "Charmeleon" },
],
addPokemons: (pokemon) =>
set((state) => ({
 pokemons: [
 { name: pokemon.name, id: Math.random() * 100 },
  ...state.pokemons,
 ]})),
removePokemon: (id) =>
 set((state) => ({
   pokemons: state.pokemons.filter((pokemon) => pokemon.id !== id),
 })),
}));
export default useStore;

Хранилище создается с помощью create API, и экшены могут быть созданы, как показано выше. Доступ к этому хранилищу можно получить через приложение без использования какого-либо провайдера HOC (компонента более высокого порядка), как в Redux.

Шаг 3. Получаем доступ к хранилищу

Zustand не полностью привязан к React. Его можно использовать с любыми другими библиотеками, такими как Vue или Angular. Давайте посмотрим, как мы можем получить доступ к хранилищу из компонента.

Доступ к состоянию хранилища и отображение данных в виде списка

import useStore from "../store";
function List() {
 const pokemons = useStore((state) => state.pokemons);
 const removePokemon = useStore((state) => state.removePokemon);
return (
 <div className="row">
  <div className="col-md-4"></div>
  <div className="col-md-4">
  <ul>{pokemons.map((pokemon) => (
     <li key={pokemon.id}>
      <div className="row">
      <div className="col-md-6">{pokemon.name} </div>
      <div className="col-md-6">
        <button className="btn btn-outline-secondary btn-sm"
         onClick={(e) => removePokemon(pokemon.id)}>X
        </button>
       </div>
      </div>
     </li>
    ))}
  </ul>
</div>
 <div className="col-md-4"></div>
</div>);
}
export default List;

Обновляем состояния с помощью формы

import { useState } from "react";
import useStore from "../store";

function Form() {
  const [name, setName] = useState("");
  const addPokemons = useStore((state) => state.addPokemons);

  const onChange = (e) => {
    setName(e.target.value);
  };

  const addPokemon = () => {
    addPokemons({ name: name });
    clear();
  };

  const clear = () => setName("");

  return (
    <div className="row">
      <div className="col-md-2"></div>
      <div className="col-md-6">
        <input
          type="text"
          className="form-control"
          onChange={onChange}
          value={name}
        ></input>
      </div>
      <div className="col-md-2">
        <button
          className="btn btn-outline-primary"
          onClick={(e) => addPokemon()}
        >
          Add
        </button>
      </div>
      <div className="col-md-2"></div>
    </div>
  );
}

export default Form;

Как видите, Zustand намного точнее и проще, чем Redux, Recoil или Jotai.

Шаг 4. Обработка асинхронных экшенов

Одним из реальных применений действия Zustand является получение данных через REST API. Эти экшены мы должны выполнять асинхронно.

import axios from "axios";
const useStore = create(set => ({
  pokemons: [],
  getPokemons: async ()=> {
    const response = await axios.get('')
    set({ pokemons: response.data })
  }
}))

Асинхронный экшен можно обработать, используя async/await в JavaScript. В приведенном выше примере вы можете увидеть, как асинхронные экшены запускаются через axios.

Шаг 5: Middleware для Zustand

Zustand имеет несколько уникальных middleware'ов из коробки. Наиболее известными middleware'ами являются dev tools (использующие инструменты разработки Redux) и Persist, которые могут сохранять данные в браузере.

let useStore : (set)=>{
  /* state and actions */
};
useStore = persist(useStore, { name: 'Bulbasaur' })
useStore = devtools(useStore)

export default useStore = create(useStore);

С Zustand вы также можете создать собственный middleware и плагин.

Заключение

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

Например, Zustand позволяет получить доступ к хранилищу вне React и совместим с Redux DevTools, Persist и поддерживает React Hooks, TypeScript и т. д.

Таким образом, Zustand выглядит отличным кандидатом на пост управления состоянием в приложении. Простота библиотеки также делает ее хорошим вариантом для начинающих.