easy-story-hooks

和同事一起针对当下全局状态管理现状而开发的一套解决方案.

? English | 简体中文

基于react hooks 和 EventTarget 实现的最小全局状态管理，可以在组件之间共享全局状态。高性能就像使用useState一样简单。

使用简单 最简单的全局状态管理

仅需使用两个步骤，即可初始化全局状态，并将组件状态在两个方向上都绑定到全局状态。与其他全局状态管理工具相比，使用此库不需要对原始代码进行太多修改。仅管理状态仓库，并且修改全局状态的方法返回到组件的内部调用。就像useState一样易于使用！希望世界上不再有困难的全局状态管理。

与redux相比，这非常简单！舍弃redux！

基于react hooks和EventTarget全局状态可以在任何组件中使用，并且所有组件的最外层不需要包装context.provider Redux主要由store，action组成，reducer等，太大，太复杂，麻烦，组件无用的刷新太多，性能低下。

将组件状态绑定到全局状态

组件状态更改时的全局状态更改全局状态更改时的组件状态更改高性能，减少了无用的组件刷新而不是使用上下文刷新组件，而是使用setstate来刷新单个组件。如果使用上下文，将导致大量组件的无用刷新。

开始

npm i easy-story-hooks -S

或者

cnpm i easy-story-hooks -S

或者

yarn add easy-story-hooks

在您的React项目中

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

initState

函数initState用于生成状态的初始值，并且可以多次使用。参数是一个object，键名是全局状态名，键值是全局状态初始值。

useStore

函数useStore用于订阅全局状态，组件状态在两个方向上都绑定到全局状态。第一个参数是string，它是全局状态名称。返回值是一个Array，它返回一个有状态值和一个更新它的函数。

getState

函数getState用于读取全局状态。

changeState

组件更新状态，用于更改全局状态并通知所有订阅状态，第一个参数是全局状态名称，第二个参数是更新后的状态值，或者函数返回新的状态值。

Typescript 中的 Api

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;
};

基本语法

就像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;

当然，您可以使用 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;

子组件读取全局状态

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;