easy-story-hooks

🌍 English | 简体中文

Based on the minimal global state management implemented by react hooks and EventTarget, global states can be shared across components. High performance is as simple as using useState.

Simple to use, it may be the easiest way to use the global state management tool!

There are only two steps to use, the global state is initialized, and the component state is bound to the global state in both directions. Compared to other global state management tools, using this library does not require much modification to the original code. Only the state warehouse is managed, and the method of modifying the global state is returned to the internal call of the component. Just as easy to use useState! I hope that there will be no more difficult global state management in the world.

Contrast with redux, it's very simple! Discard redux!

Based on react hooks and EventTarget The global state can be used in any component, and the outermost layer of all components does not need to wrap context.provider redux is mainly composed of store, action, reducer, etc., too large and complicated, cumbersome, too many useless refresh of components, low performance

Bind component state to global state

Global state change when component state changes Component state change when global state changes High performance, reducing useless component refreshes Instead of using context to refresh the component, use setstate to refresh only the individual components. If you use context, it will cause a useless refresh of a large number of components

How to get started

npm i easy-story-hooks -S

In your React reference

import {changeState,useStore,initState,getState} from "easy-story-hooks";

initState

The function initState is used to generate the initial value of the state and can be used multiple times. The parameter is an object, the key name is the global state name, and the key value is the global state initial value.

useStore

The function useStore is used to subscribe to the global state, and the component state is bound to the global state in both directions. The first parameter is a string, which is the global state name. The return value is an 'Array`, which returns a stateful value and a function that updates it.

getState

The function getState is used to read the global state.

changeState

The component update status used to change the global state and notify all subscription statuses,The first parameter is the global state name, the second parameter is the updated state value, or the function returns a new state value.

API in Typescript

function useStore(name: string): [any, Function];
function changeState(keyname: string, newvalue: any): void;
function getState(): {
  [key: string]: any;
};
function initState(jsonobject: {
  [key: string]: any;
}): {
  [key: string]: any;
};

Basic grammar

Just as easy to use useState!

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

easy-story-hooks

import React,{useEffect,useState} from 'react';
import {useStore,initState} from "easy-story-hooks";
const App = ()=>{
  initState({
    count:1,
  })
  const [number, setnumber] = useStore("count");
  return (
    <>
    <h1>{number}</h1>
    <button onClick={()=>setnumber(number+1)}>Add one</button>
    </>
  )
}
export default App;

Of course, you can use changeState

import React,{useEffect,useState} from 'react';
import {useStore,initState,changeState} from "easy-story-hooks";
const App = ()=>{
  initState({
    count:1,
  })
  const increment = ()=> {
    changeState("count", a => a + 1);
  }
  const [number, setnumber] = useStore("count");
  return (
    <>
    <h1>{number}</h1>
    <button onClick={increment}>Add one</button>
    </>
  )
}
export default App;

Subcomponent reads global state

import React from 'react';
import {getState,changeState} from "easy-story-hooks";
const Test = ()=>{
    let test = getState().count
    const remove = () => {
        changeState("count", a => a - 1);
    }
    return (
        <>
        <h1>{test}</h1>
        <button onClick={remove}>Subcomponent changes count</button>
        </>
    )
}
export default Test;