В предыдущей статье мы впервые представили Нано Магазины и как они могут синхронизировать состояния между фреймворками.

В этой статье мы углубимся в эти нано-магазины и рассмотрим карты.

Карты — это своего рода хранилище, которое можно использовать для хранения объектов, где вы хотите сохранить значение ключа.
Затем вы можете использовать этот ключ для обновления существующих элементов в магазине.


Карты в магазинах Nano

Давайте создадим пример. Это поможет объяснить, как работают Карты и что они могут сделать для нас.

Если вы хотите продолжить, используйте это Филиал GitHub в качестве отправной точки.

Мы хотим создать список цветов, в котором пользователь может обновить существующий цвет и добавить новый.

Во-первых, давайте добавим новый магазин, который мы назовем /store/colors.js.

Внутри начните с импорта функции карты.

import { map } from 'nanostores';
Войти в полноэкранный режим

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

Затем мы можем определить наш первоначальный объект. В нашем случае мы хотим добавить к нему уже один цвет.

const colors = map({
  blue: {
    color: 'blue',
    hex: '#9bf6ff',
  },
});
Войти в полноэкранный режим

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

Как видите, у него есть идентификатор ключа (blue), которые мы можем использовать для управления этой конкретной записью.

Теперь давайте также добавим функцию, которая может добавлять цвета на эту карту.

const addColor = (color, hex) => colors.setKey(color, { color, hex });
Войти в полноэкранный режим

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

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

Затем мы экспортируем карту и эту функцию добавления.

export { colors, addColor };
Войти в полноэкранный режим

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

Теперь давайте изменим наш компонент React, чтобы использовать эту цветовую карту.

import { useStore } from '@nanostores/react';
import { addColor, colors } from '../store/colors';

export default function React() {
  const colorItems = useStore(colors);

  return (
    <div>
      <ul>
        {Object.values(colorItems).map(({ color, hex }) => (
          <li key={color} style={{ backgroundColor: hex }}>
            {color} {hex}
          </li>
        ))}
      </ul>
      <button onClick={() => addColor('blue', '#a0c4ff')}>Change blue</button>
      <button onClick={() => addColor('red', '#ffadad')}>Add red</button>
    </div>
  );
}
Войти в полноэкранный режим

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

Этот код визуализирует карту и показывает цвета, которые в ней присутствуют.
Затем мы добавили две кнопки.

  • Изменить синий цвет
  • Добавьте новый красный цвет

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

Карты магазинов Astro Nano

Если вы хотите проверить исходный код, я добавил его сюда. Филиал GitHub.


Спасибо за чтение, и давайте общаться!

Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключиться к Фейсбук или же Твиттер