galinka
v0.1.2
Published
simple app state driving
Downloads
1
Readme
Very simple library for driving your app's state.
Данная библиотека вдохновлена Redux и использует некоторые ее идеи.
Пример использования на React.
а)Импортируй G
```js
import G from '../../galinka';
```
б)Создай константу, вызвав G. Обязательный аргумент - имя хранилища.
```js
const inputStore = G('toDos');
```
Данная константа используется для взаимодействия с хранилищем. Если в компоненте используются разные хранилища, то для каждого создай константу, вызвав G с артументом, соответствующем имени данного хранилища.
в)Чтобы поместить данные в хранилище вызови на соответствующей его имени константе метод updateStore:
```js
inputStore.updateStore('add', data);
```
где первый аргумент - название метода обработки данных(см.ниже) для данного хранилища, а второй - данные.
Если нужно выполнить upgrade данных в нескольких хранилищай, создай для каждого хранилища свою кнстанту,вызвав G с именем нужного хранилиза и на ней вызови метод апдейта(updateStore)
к оглавлению
1)сделай несколько констант, вызвав функцию G c обязательным аргументом - именем соответствующего хранилища:
```js
const toDosStoreInstance = G('toDos');
const someNextStoreInstance = G('someNextStore');
```
и на каждой константе вызови метод getStore
```js
const toDosStore = toDosStoreInstance.getStore();
const someNextStore = someNextStoreInstance.getStore();
```
вернется соответствующее имени хранилище.
2)сделай одну константу, вызвав функцию G с обязательным аргументом - именем любого(можно основного) хранилища.
```js
const toDosStoreInstance = G('toDos');
```
и для каждого требуемого хранилища выполни вызов метода с его именем:
```js
const toDosStore = toDosStoreInstance.getStore('toDos');
const someNextStore = toDosStoreInstance.getStore('someNextStore');
```
ВНИМАНИЕ!!! Аргумент - название хранилища - обязательно
г) единожды для каждого компонента, использующего G добавь функцию, вызывающую перерендеринг страницы:
```js
componentDidMount = () => {
inputStore.addStateFunc(this.state, 'toDos');
};
```
первый аргумент - функция, второй - на какое хранилище подписываемся, третий - постоянный уникальный ID. по нему будет происходить защита от дублей, если ты ошибочно будешь вызывать эту функцию несколько раз, например в рендере.Важно, чтобы данный ID не меялся.
ВАЖНО! В идеале добавляй эту функцию в том месте, которое вызывается лишь однажды за жизненный цикл компонента.
В React я просто передаю setState в ComponentDidMount.
Именно это место связывает хранилище и фреймворк(библиотеку react в данном случае)
к оглавлению
б)сделай одну константу, вызвав G с аргументом - обязательным именем хранилища:
```js
const inputStoreInstance = G('toDos');
```
в)задай все функции обработчики данного хранилища.
У каждой функции обработчика первый аргумент - данные, второй - старое хранилище. Оба обязательны.
Возвращать функция должна новое хранилище:
```js
const del = (id, oldState = []) => oldState.filter(item => !(item.id === id));
const add = (data, oldState = []) => [data, ...oldState];
```
Обрати внимание, я задаю дефолтное значение старого хранилища в аргументе функции. G ничего не знает о функциях-обработчиках,
поэтому подобное дефолтное значение позволит избежать ошибок при первом обращении к функции.
г)Структура хранилища - не зона ответственности G. Ты задаешь структуру самостоятельно.
Хорошая практика - указывать структуру данного хранилища в начале файла:
```js
const thisStoreStructure = [
{
id:'someUniqueId',
data:'some string data',
},
{
id:'someAnotherUniqueId',
data:'some another string data',
},
];
```
д)Добавь функции-обработчики текущего хранилища. Для каждой функции создай объект вида
```js
const addObj = {
type: 'add',
updateFunc: add,
};
const delObj = {
type: 'del',
updateFunc: del,
};
```
где оба свойства - обязательные.
свойство из поля type ты потом будешь вызывать при обновлении хранилища (updateStore('add', data), см п.1)
свойство из поля update - это сама функция обработчик (const add = (data, oldState = []) => [data, ...oldState];)
далее есть 2 варианта:
1)Функций несколько: на константе созданной вызовом G, вызови метод addStoreConstructors куда передай массив сформированных выше объектов:
```js
toDos.addStoreConstructors([addFuncObj, delFuncObj]);
```
2)Функция одна. на константе созданной вызовом G, вызови метод addStoreConstructor, куда передай сформированный выше объект:
```js
toDos.addStoreConstructor(addFuncObj);
```
е)Подключи файлы конструкторов store к проекту, например проимпортировав их в js точке входа проекта или подключив скриптом в html точке входа
к оглавлению
а) История. На данный момент эта фича отключена.
При каждом обновлении store, старое состояние хранилищ сохраняется.
Можно использовать историю состояний. Метод getFullHistory вернет массив всех состояний, последовательно измененных.
По дефолту история выключена, так как сохраняются полный объект всех хранилищ и при длительном использовании это может вызывать утечки памяти.
Чтобы включить - на любом инстансе класса Galinka вызови метод enableHistory();
Если понадобится выключить историю - на любом инстансе класса Galinka вызови метод disableHistory();
Хорошей практикой считается указание всех параметров в отдельном файле.
к оглавлению