nonaction

中文介紹

Nonaction State Management Demo

~~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, 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

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

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

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？

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...

    <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:

<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.

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