0.1.3 • Published 5 years ago
state-context v0.1.3
state-context
Simple state-management with React Context API
Install
npm install state-context
Idea
state-context
does state management for React. In terms of complexity it is located between using local state and Redux.
- With
state-context
it's very easy to migrate your component from local state to global state:
const MyBirthday: React.SFC = () => {
const age, setAge = React.useState(20);
return ( <button onClick={() => setAge(age + 1)}> Celebrate {age} birthday! ); };
[Plunker](https://next.plnkr.co/edit/kyuJJXI5gKEtUEcS?open=src%2Fmy-birthday.js&preview)
</td>
<td valign="top">
```tsx
import * as React from 'react';
import { MyStore } from './my-store';
const MyBirthday: React.SFC = () => {
const context = React.useContext(MyStore);
const [age, setAge] = context.useState.age;
return (
<button onClick={() => setAge(age + 1)}>
Celebrate {age} birthday!
</button>
);
};
- It's useful for cases where Redux boilerplate would be an overhead (it still makes sense and is easy to decouple state management from UI layer).
- You can set up one global store or multiple shared-state containers.
- It's still deterministic as you can attach middleware and watch/undo/redo.
- You have TypeScript support out of the box.