Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dmitriypereverza/light-state-manager
Данная библиотека предоставляет альтернативу использования Redux.
https://github.com/dmitriypereverza/light-state-manager
react state state-management
Last synced: 8 days ago
JSON representation
Данная библиотека предоставляет альтернативу использования Redux.
- Host: GitHub
- URL: https://github.com/dmitriypereverza/light-state-manager
- Owner: dmitriypereverza
- Created: 2019-12-02T17:07:22.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-10T06:06:26.000Z (over 3 years ago)
- Last Synced: 2024-11-16T07:44:43.374Z (2 months ago)
- Topics: react, state, state-management
- Language: TypeScript
- Homepage:
- Size: 137 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Установка
> npm install --save light-state-manager
или
> yarn add light-state-manager
# Использование
Данная библиотека позволяет создавать отдельные модули, в которых можно создавать `action` функции.
Создадим модуль "Счетчик".
```typescript jsx
import { StoreContext } from "light-state-manager";
export interface StateInterface {
counter: number;
}
const initialState: StateInterface = {
counter: 0,
};
export default new StoreContext(
initialState, {
setCounter
}
});
```
В поле `actions` мы указами `setCounter` для установки значений в нашем модуле. Создавать каждый `action` можно с помощью конструкции `new Action().create` где `StateInterface` интерфейс стейта нашего модуля.
```typescript jsx
import { Action } from "light-state-manager";
import { StateInterface } from "./index";
export const setCounter = new Action().create(
{
setCounter: (_, payload: number) => {
return { counter: payload };
},
},
(actions, count: number) => {
setTimeout(() => actions.setCounter(count), 1000);
},
);
```
Вторым параметром функции `create` является функция, внутри которой мы имеем доступ к параметру `actions`. С помощью этого параметра мы можем вызвать отдельные обработчики событий определенным первым параметром. Каждый обработчик должен возвращать новый стейт.
Теперь когда мы определили стейт подключим его.
```typescript jsx
import React from "react";
import ReactDOM from "react-dom";
import { StoreContext } from "light-state-manager";
import App from "./App";
import userModule from "state/user";
const WrappedApp = StoreContext.connectContexts([userModule], App);
ReactDOM.render(, document.getElementById("root"));
```
`StoreContext.connectContexts` позволяет оборачивать наше приложение для проброса в него необходимых данных.
Функция `pureConnect` позволяет вызывать перерисовку компонента только когда изменились зависимые пропсы.
```typescript jsx
import React from "react";
import { pureConnect } from "light-state-manager";
import userModule from "state/user";
const App: React.FC = ({ counter, setCounter }) => {
return (
<>
setCounter(Number(e.target.value))} />
{counter}
>
);
};
export default pureConnect(App, () => {
const { counter, setCounter } = userModule.getState();
return {
counter,
setCounter,
};
});
```
И наконец подключаем его к компоненту. Готово!
