nonaction
Version:
Make state management easily like you do nothing!
192 lines (155 loc) • 4.69 kB
Markdown
# nonaction
[](https://travis-ci.org/realdennis/nonaction)
[](https://gitter.im/nonaction-community/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[中文介紹](https://github.com/realdennis/nonaction/blob/master/Chinese.md)
**Nonaction** State Management [Demo](https://codesandbox.io/s/03q5n1vp0)
<br/>
---
~~No Action No Reducer No Middleware It will be managed when time comes~~
1. Share state by wrote Hooks and wrapped in container
2. **nonaction** will give you ~~a pair of wings~~ `useProvided`
3. using hook in Child Components
This repository is inspired by [unstated](https://github.com/jamiebuilds/unstated), but not really similar, what I actually do is merge the Context Provider, Proxy the root context value, return the relative Container's state.
## Installation
```sh
$ npm install nonaction
```
## Usage
```sh
└── src
├── App.jsx
├── Component
│ └── Counter.jsx
└── store
└── useCounter.js
```
_useCounter.js_
```javascript
import { Container } from 'nonaction';
const initialState = 0;
const hook = () => {
const [count, setCount] = useState(initialState);
const add = val => setCount(count + val);
const sub = val => setCount(count - val);
return { count, add, sub };
};
export default Container(hook); //remenber use Container to wrap
```
_App.jsx_
```jsx
import { Provider } from 'nonaction';
import useCounter from './Store/useCounter.js';
import Counter from './Component/Counter';
export default () => {
return (
<div id="App">
<Provider inject={[useCounter]}>
<Counter />
</Provider>
</div>
);
};
```
_Counter.jsx_
```jsx
import { useProvided } from 'nonaction';
import useCounter from '../store/useCounter';
export default () => {
const { count, add, sub } = useProvided(useCounter);
return (
<div>
<p> Count {count} </p>
<button onClick={() => add(1)}>+</button>
<button onClick={() => sub(1)}>-</button>
</div>
);
};
```
## Explanation
Memorize how we use Context API？
```jsx
import { createContext } from 'react';
const Context1 = createContext();
const demo = () => {
return (
<Context1.Provider value={123}>
<Child1 />
<Child2 />
</Context1.Provider>
);
};
//Assume Child1 need Context1
const Child1 = () => {
return (
<>
<Context1.Consumer>{value => <p>{value}</p>}</Context1.Consumer>
</>
);
};
```
Context is greate，but **multiple Context** will be...
```javascript
<Context1.Provider>
<Context2.Provider>
<Context3.Provider>
<Context4.Provider>
... // Very annoying One Provider need One Consumer
... // Context Hell
</Context4.Provider>
</Context3.Provider>
</Context2.Provider>
</Context1.Provider>
```
In fact, You just use one Context share everything like this:
```jsx
<Context1.Provider value={{stateA,stateB,stateC}} >
<Child />
</Context1.Provider>
```
But potential danger is that every Components under Provider could be share/manipulate state, not complying **Principle_of_least_privilege**.
If there exsits Library, let you place every context in the root provider, but child components only take their Context value, it will be very convenience.
```jsx
import { Provider } from 'nonaction';
import { ChildA, ChildB } from 'Component';
import { useCounter, useText } from './store';
const App = () => {
return (
<Provider inject={[useCounter, useText /*...otherHooks*/]}>
<ChildA />
<ChildB />
</Provider>
);
};
//In ChildA
import useCounter from '../store/useCounter';
export default () => {
const counter = useProvided(useCounter);
return (
<>
<p>Count : {count}</p>
<button onClick={() => counter.add(1)}>+</button>
<button onClick={() => counter.sub(1)}>-</button>
</>
);
};
//In ChildB
import useText from '../store/useText';
export default () => {
const text = useProvided(useText);
return (
<>
<p>text {text.text}</p>
<button onClick={text.bang}>bang</button>
<button onClick={text.reset}>reset</button>
</>
);
};
/* In future, if nested component also need to use counter's hooks
* also import useCounter, and manipulate by useProivded.
*/
```
That will be awesome, right?
**That's the problem nonaction want to solve.**
---
LICENSE MIT © 2019 realdennis