preface 📝

👉 unstated-next State management based on React mental model (hook+context). 👈

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (IMG uhrmuffj-1618884145855)( https://raw.githubusercontent.com/blazer233/unstated-next/main/public/temp1.jpg )]

Before the emergence of react hook, there were Redux & react Redux, which was based on a single data source and used pure functions to modify the state, and also based on object Defining property and Proxy are mobx for data interception and access, but with the emergence of react 16.8, we can implement state management based on our own hook, that is, unstated next

Demo official website 🥔

...
import { createContainer } from "unstated-next";

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let decrement = () => setCount(count - 1);
  let increment = () => setCount(count + 1);
  return { count, decrement, increment };
}

//Use createContainer to transform useCounter into a component that provides state and method
let Counter = createContainer(useCounter);

function CounterDisplay() {
//Get the status and method from the processed useCounter
  let counter = Counter.useContainer();
  return (
    <div>
      <button onClick={counter.decrement}>-</button>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
    </div>
  );
}

function App() {
  return (
    <Counter.Provider>
      <CounterDisplay />
      {/* Inject the initial value through the initialState attribute */}
      <Counter.Provider initialState={2}>
            <CounterDisplay />
      </Counter.Provider>
    </Counter.Provider>
  );
}

render(<App />, document.getElementById("root"));

What did unstated next do?

1. Provide createContainer to encapsulate custom Hooks into a data object that can provide states and methods
2. Using useContext, two methods, Provider injection and component Store, are constructed

Implement an unstated next 🚲

import { createContext, createElement, useContext } from "react";
export default useHook => {
  const Context = createContext();
  const Provider = ({ init, children }) => {
    return createElement(Context.Provider, { value: useHook(init) }, children);
  };
  const useContainer = () => useContext(Context);
  return { Provider, useContainer };
};

• Return an object containing Provider and useContainer through the function
• The provider accepts the initial value of init, executes the data object component, and creates a context through createElement Provider passes the value component and saves the method and state returned by the data object component to value. The child node remains unchanged and returns:

<xxx.Provider value={Method, status...}>{children}</xxx.Provider>

• Get the current context through useContainer value status and method in provider and return

How to resolve provider shell 🏁

In unstated next, each component processed as a data object needs to be wrapped level by level in the outermost layer if it wants to be shared

<Container1.Provider>
  <Container2.Provider>
    <Container3.Provider>MyApp</Container3.Provider>
  </Container2.Provider>
</Container1.Provider>

We can process through a function similar to compose, stack all data object components level by level through reduce, and return an onion like Provider. When calling, we only need to wrap the business components with the Provider

export const composeProvider = (...commonFun) => ({ children }) => {
  return commonFun.reduceRight((child, { init, Provider }) => {
    return <Provider init={init}>{child}</Provider>;
  }, children);
};

//Make a call
const Provider = reduceProvider({ ...xxxState1, init: 100 }, xxxState2);
export default () => (
  <Provider>
    <ExamplePage1 />
    <ExamplePage2 />
    <ExamplePage3 />
  </Provider>
);

View full code

be accomplished!

Summary 💢

summary

In fact, the implementation of unstated next is very simple. Generally speaking, it is a closure. It is used in simple business scenarios, and the writing method is too flexible. Once the class component is encountered, it will return to the old writing method, so it can only be said that there are advantages and disadvantages

So far, thank you for opening this article at the midpoint of your busy schedule. I hope it can be helpful to you. I believe you have a general recognition of unstated next. If you have any questions, you are welcome to make corrections.

Welcome to add my micro signal (s839752074) to discuss front-end technical issues (Note: qian)

• 👋: Jump to github

reference

• 🍑: unstated-next
• 🍑: React hooks, composition and abstraction, state management
• 🍑: Intensive reading of unstated and unstated next source code
• 🍑: Use tutorial of React lightweight state management library unstated next

Please a star, thank you