Kedge добавляет новый хук useStore, который ощущается и ведет себя так же, как useState, за исключением того, что он используется глобально.

Установка

npm install kedge

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

Ранее состояние React представляло собой объект, содержащий несколько свойств, описывающих состояние компонента.

useState изменил это. Состояние теперь является единственным значением, представляющим одно свойство компонента. Таким образом, компоненты имеют несколько объектов состояния.

Тот же принцип применяется к магазинам, созданным с помощью useStore. Store — это единственное значение, и приложение, скорее всего, будет иметь более одного значения.

При создании магазинов я рекомендую делать это централизованно.

# store.js
import { createStore } from 'kedge';
export default {
  firstName: createStore('John'),
  lastName: createStore('Doh'),
};

Теперь мы можем использовать эти магазины вот так.

# profile.js
import { useStore } from 'kedge';
import store from './store.js'
export default function Profile() {
  const firstName = useStore(store.firstName);
  const lastName = useStore(store.lastName);
  
  return (
    <>
      <div>First name: {firstName}</div>
      <div>Last name: {lastName}</div>
    </>
  );
}

Любые изменения, внесенные в эти хранилища, приведут к обновлению всех компонентов, которые их используют.

# randomizer.js
import faker from 'faker';
import { useStore } from 'kedge';
import store from './store.js'
function setRandomNames() {
  store.firstName.set(faker.name.firstName());
  store.lastName.set(faker.name.lastName());
}
export default function Profile() {
  return (
    <button onclick={setRandomNames}>Randomize</button>
  );
}