nonaction
Nonaction State Management Demo
No Action No Reducer No Middleware It will be managed when time comes
- Share state by wrote Hooks and wrapped in container
- nonaction will give you
a pair of wingsuseProvided
- using hook in Child Components
This repository is inspired by 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
$ npm install nonaction
Usage
└── src ├── App.jsx ├── Component │ └── Counter.jsx └── store └── useCounter.js
useCounter.js
;const initialState = 0;const hook = { const count setCount = ; const add = ; const sub = ; return count add sub ;};hook; //remenber use Container to wrap
App.jsx
import Provider from 'nonaction';import useCounter from './Store/useCounter.js';import Counter from './Component/Counter'; return <div ="App"> <Provider => <Counter /> </Provider> </div> ;;
Counter.jsx
import useProvided from 'nonaction';import useCounter from '../store/useCounter'; const count add sub = ; return <div> <p> Count count </p> <button =>+</button> <button =>-</button> </div> ;;
Explanation
Memorize how we use Context API?
import createContext from 'react';const Context1 = ;const demo = return <Context1.Provider => <Child1 /> <Child2 /> </Context1.Provider> ;;//Assume Child1 need Context1const Child1 = return <> <Context1.Consumer> <p>value</p></Context1.Consumer> </> ;;
Context is greate,but multiple Context will be...
<Context1Provider> <Context2Provider> <Context3Provider> <Context4Provider> ... // Very annoying One Provider need One Consumer ... // Context Hell </Context4Provider> </Context3Provider> </Context2Provider> </Context1Provider>
In fact, You just use one Context share everything like this:
<Context1.Provider = > <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.
import Provider from 'nonaction';import ChildA ChildB from 'Component';import useCounter useText from './store';const App = return <Provider => <ChildA /> <ChildB /> </Provider> ;; //In ChildAimport useCounter from '../store/useCounter'; const counter = ; return <> <p>Count : count</p> <button =>+</button> <button =>-</button> </> ;; //In ChildBimport useText from '../store/useText'; const text = ; return <> <p>text texttext</p> <button =>bang</button> <button =>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