Что такое кастомные хранилища hashStorage ?

Поиск

Кастомные хранилища, такие как hashStorage, позволяют сохранять и восстанавливать состояние приложения через параметры URL. Вот как это можно реализовать:

Создание hashStorage:
Создайте хранилище, которое будет работать с хэшем URL. Оно должно реализовывать методы getItem, setItem и removeItem.

// helpers/hashStorage.js
import { StateStorage } from 'zustand/middleware';
 
const hashStorage = {
  getItem: (name) => {
    const searchParams = new URLSearchParams(window.location.hash.slice(1));
    const value = searchParams.get(name);
    return value ?? null;
  },
  setItem: (name, value) => {
    const searchParams = new URLSearchParams(window.location.hash.slice(1));
    searchParams.set(name, value);
    window.location.hash = searchParams.toString();
  },
  removeItem: (name) => {
    const searchParams = new URLSearchParams(window.location.hash.slice(1));
    searchParams.delete(name);
    window.location.hash = searchParams.toString();
  },
};
 
export default hashStorage;

Настройка Middleware Persist:
Подключите persist middleware в Zustand Store и используйте hashStorage для сохранения состояния.

// stores/SearchStore.js
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import hashStorage from '../helpers/hashStorage';
 
const useSearchStore = create(persist(
  (set) => ({
    searchText: '',
    setText: (text) => set({ searchText: text }),
  }),
  {
    name: 'search-storage',
    getStorage: () => hashStorage,
  }
));
 
export default useSearchStore;

Использование в компоненте:
В компоненте можно инициализировать состояние из URL и обновлять его при изменении.

import { useEffect } from 'react';
import useSearchStore from './stores/SearchStore';
 
const SearchComponent = () => {
  const { searchText, setText } = useSearchStore();
 
  useEffect(() => {
    const initialSearchText = new URLSearchParams(window.location.hash.slice(1)).get('searchText') || '';
    setText(initialSearchText);
  }, [setText]);
 
  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={(e) => setText(e.target.value)}
        placeholder="Поиск..."
      />
      <p>Текущий поиск: {searchText}</p>
    </div>
  );
};

Другие типы хранилищ:
Аналогично можно создать хранилище для sessionStorage или localStorage.

// helpers/sessionStorage.js
const sessionStorage = {
  getItem: (name) => sessionStorage.getItem(name),
  setItem: (name, value) => sessionStorage.setItem(name, value),
  removeItem: (name) => sessionStorage.removeItem(name),
};
 
export default sessionStorage;

Основные моменты:

hashStorage позволяет сохранять состояние в хэше URL.
persist middleware используется для сохранения и восстановления состояния.
Инициализация состояния из URL при монтировании компонента.
Обновление URL при изменении состояния.

Таким образом, кастомные хранилища позволяют гибко управлять состоянием приложения и синхронизировать его с URL.