基于Reactv16的Context简单封装的轻量级状态库。

安装npminstall--savereact-fax-store

使用import{createStore}from'react-fax-store';constStore=createStore(()=>({text:'fax-store'}));functionApp(){constdata=React.useContext(Store.Context);//{text:'fax-store'}subscribestateconststate=store.useState();//{text:'fax-store'}subscribestateconsttext=store.useSelector(state=>state.text);//fax-storesubscribeonlystate.textchangeconststore=store.useStore();store.getState();//{text:'fax-store'}store.setState({text:'react-fax-store'});//orconstupdate=store.useUpdate();update({text:'react-fax-store'});return<Store.Consumer>{state=>console.log(state)}</Store.Consumer>}<Store.Provider><App/></Store.Provider>createStore(initialValue:()=>{}):Store;创建Store对象

import{createStore}from'react-fax-store';createStore(()=>{return{...}})StoreProvider<Store.Provider>...</Store.Provider>Consumer<Store.Provider>...<Store.Consumer>{state=>{return<div>{state}</div>}}</Store.Consumer>...</Store.Provider>useState订阅整个数据

functionInfo(){conststate=Store.useState();return<div>{state}</div>}useSelector订阅指定数据

functionInfo(){conststate=Store.useSelector(state=>{return{username:state.username}});return<div>{state.username}</div>}useUpdate更新数据

functionAction(){constupdate=Store.useUpdate(prevState=>{return{username:prevState.username+'_xc'}});return<buttononClick={update}>Add</button>}useProvider别名：useStore

获取由Provider提供的store数据对象

conststore=Store.useStore();store.getState();//orstore.setState(...)Context可直接通过React.useContext获取数据

conststate=React.useContext(Store.Context);interfaceexporttypewithHooks=<T>(c:T)=>T;exporttypecreateStore=<TextendsRecord<string|number|symbol,any>>(initialValue:()=>T):Store<T>exporttypeUpdate<T={}>=<KextendskeyofT>(state:((prevState:Readonly<T>)=>Pick<T,K>|T|null)|Pick<T,K>|T|null)=>void;typeSubscriber<T={}>=(prevState:Readonly<T>,nextState:Readonly<T>)=>void;typeUseSelector<T={}>=<Sextends(state:T)=>any>(selector:S)=>ReturnType<S>;typeUseUpdate<T={}>=()=>Update<T>;typeUseState<T={}>=()=>T;typeUseProvider<T>=()=>Provider<T>;typeConsumer<T={}>=React.FC<ConsumerProps<T>>;typeContext<T>=React.Context<T>;interfaceConsumerProps<T={}>{children:(state:T)=>React.ReactElement|null;}interfaceProvider<T={}>extendsReact.Component<{},T>{getSubscribeCount():number;subscribe(subscriber:Subscriber<T>):()=>void;getState():T;}interfaceStore<T={}>{Context:Context<T>;Provider:new(props:{})=>Provider<T>;Consumer:Consumer<T>;useProvider:UseProvider<T>;useStore:UseProvider<T>;useState:()=>T;useSelector:UseSelector<T>;useUpdate:UseUpdate<T>;}Examplestore.js

import{createStore}from'react-fax-store';exportdefaultcreateStore(()=>{return{name:'react-fax-store';}});index.js

importReactfrom'react'importStorefrom'./store';functionInfo(){conststate=Store.useState();return<div>{state.name}</div>}functionApp(){return(<Store.Provider><Info/></Store.Provider>);}exportdefaultApp;