react-simple-global-state-store-hook

Github.com/masx200/rea…

A minimalist global state management library based on React hooks and EventTarget

Can share global state across components for high performance

Use global state just like useState, very succinctly

Simple to use, probably the easiest way to use the global state management tool!

There are only two steps to initialize the global state, and the component state is bidirectionally bound to the global state

Compared to other global state management tools, using this library does not require many changes to the original code

Only the state store is managed, and methods to modify global state are returned to component internal calls,

It’s as easy as using useState!

Very simple compared to Redux! Abandon redux!

Implemented using React hooks and EventTarget

Global state can be used in any component, and the outermost layer of any component does not need to wrap context.provider

Redux is mainly composed of store, Action, Reducer and so on. It is too large, complicated and tedious, with too many useless refresh components and low performance

Component state is bidirectionally bound to global state

Global state changes when component state changes

Component state changes when global state changes

High performance, reduce useless component refresh

Instead of using context to refresh components, use setState to refresh only individual components

Using context results in a large number of useless refreshes of components

React Global State Management library with just a few dozen lines of code!

View source code

url

Masx200. Making. IO/index html#…

Local installation

cnpm install  --save https://github.com/masx200/react-simple-global-state-store-hook.git
Copy the code

or

yarn add https://github.com/masx200/react-simple-global-state-store-hook.git
Copy the code

usage

import {
  useGlobalStore,
  initGlobalState,
  getGlobalStates
} from "react-simple-global-state-store-hook";
Copy the code

functiongetGlobalStatesUsed to read global state

functioninitGlobalStateUsed to generate state initials,

The parameter is an object, the key name is the global state name, and the key value is the initial value of the global state

functionuseGlobalStoreUsed to subscribe to global state. Component state is bidirectionally bound to global state

The first parameter is an Object with the key name global state name and the key value being the initial value of the component state

The return value is object

Basic grammar

Can only be used in react functional components!

The following example uses es6’s deconstructed assignment method

It’s as easy as using useState!

import React, { useState } from "react";
const [count, setCount] = useState(0);
Copy the code

Use the react – simple – global – state – store – hook

import {
  useGlobalStore,
  initGlobalState
} from "react-simple-global-state-store-hook";

initGlobalState({
  testnumber: "Initial value number", global status testname:"Initial value name"
});
function component() {
  const{global status testName: [count, setCount]} = useGlobalStore({global status testName:"Initial value" });
  return <div>{count}</div>;
}
Copy the code

You can also define multiple global shared states in a single sentence

const {
  count: [count, setCount],
  name: [name, setname]
} = useGlobalStore({ count: 0.name: "well" });
Copy the code

For example,

To generate the global state testNumber, the initial value is 88888785461111111

import {
  useGlobalStore,
  initGlobalState
} from "react-simple-global-state-store-hook";
initGlobalState({
  testnumber: 88888785461111111
});
// Global status testNumber is generated with the initial value 88888785461111111
import React from "react";

function Htest() {
  const {
    testnumber: [number, setnumber]
  } = useGlobalStore({ testnumber: 78546 });
  // The global state testNumber has already been generated and the initial value will not be repeated

  return (
    <div>
      <p>
        number:
        {number}
      </p>
      <button
        onClick={()= >{ setnumber(number + 3); /* Change the global state testNumber. Other components that use the global state number will also refresh the data */}} > change the number</button>
    </div>
  );
}

import { render } from "react-dom";

render(<Htest />, document.getElementById("root"));
Copy the code

Why write this state management tool?

because

Existing management tools such as Redux, MOBx, vuex are too cumbersome to use.

Don’t like the use of particularly cumbersome state management tools

This state management tool is probably the cheapest to learn and use

State bidirectional binding is very simple to use

The principle is introduced

Use the event Publisher subscriber pattern

Internally use useState and useEffect from React hooks

The component is notified of the refresh by firing and receiving events at EventTarget, and one event firing corresponds to multiple event listeners

Setting the event name to the state name ensures that a change in a global state will flush only the variables that use that state, and no other variables, reducing performance costs

For every variable to the global state management, set up the event to state the name of the listener, receives the incident, the new value from the internal variables reactsimpleglobalstatestore, then execute setstate, notification component refresh

When there is a global variable changes, the new value in the internal variables reactsimpleglobalstatestore, triggering event state name,

If multiple components use the same global state and change a state, the components synchronize their data and the components refresh

If a global state is initialized multiple times in multiple components, only the value initialized the first time exists in the global state

When a component is uninstalled, event listeners are cleared to prevent memory leaks

When a component is mounted, the global state is automatically synchronized

Because the event listener functions are executed asynchronously, the component state refresh is also executed asynchronously

React

React is a JavaScript library for building user interfaces.

Zh-hans.reactjs.org/tutorial/tu…

React Hooks

Hook is a new feature in React 16.8. They allow you to use state and other React functionality without writing classes.

Reactjs.org/docs/hooks-…

EventTarget

EventTarget is an interface implemented by objects that can receive events, and listeners can be created for them

Developer.mozilla.org/zh-CN/docs/…