Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/realdennis/nonaction
React State management by using Hooks. 佛系狀態管理
https://github.com/realdennis/nonaction
consumer context hooks provider react redux state state-management
Last synced: 2 days ago
JSON representation
React State management by using Hooks. 佛系狀態管理
- Host: GitHub
- URL: https://github.com/realdennis/nonaction
- Owner: realdennis
- License: mit
- Created: 2019-02-15T10:42:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-19T21:53:28.000Z (over 3 years ago)
- Last Synced: 2024-09-21T16:47:53.353Z (about 2 months ago)
- Topics: consumer, context, hooks, provider, react, redux, state, state-management
- Language: JavaScript
- Homepage:
- Size: 180 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nonaction
[](https://travis-ci.org/realdennis/nonaction)
[](https://coveralls.io/github/realdennis/nonaction?branch=master)
[](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)
---
~~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 (
);
};
```
_Counter.jsx_
```jsx
import { useProvided } from 'nonaction';
import useCounter from '../store/useCounter';
export default () => {
const { count, add, sub } = useProvided(useCounter);
return (
Count {count}
add(1)}>+
sub(1)}>-
);
};
```
## Explanation
Memorize how we use Context API？
```jsx
import { createContext } from 'react';
const Context1 = createContext();
const demo = () => {
return (
);
};
//Assume Child1 need Context1
const Child1 = () => {
return (
<>
{value =>
{value}
}
>
);
};
```
Context is greate，but **multiple Context** will be...
```javascript
... // Very annoying One Provider need One Consumer
... // Context Hell
```
In fact, You just use one Context share everything like this:
```jsx
```
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 (
);
};
//In ChildA
import useCounter from '../store/useCounter';
export default () => {
const counter = useProvided(useCounter);
return (
<>
Count : {count}
counter.add(1)}>+
counter.sub(1)}>-
>
);
};
//In ChildB
import useText from '../store/useText';
export default () => {
const text = useProvided(useText);
return (
<>
text {text.text}
bang
reset
>
);
};
/* 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