react-fax-store 基于 React 的轻量级状态库

开源地址
https://github.com/bplok20010/react-fax-store授权协议
MIT

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

安装pmistall--savereact-fax-store

使用import{createStore}from'react-fax-store';costStore=createStore(()=>({text:'fax-store'}));fuctioApp(){costdata=React.useCotext(Store.Cotext);//{text:'fax-store'}subscribestatecoststate=store.useState();//{text:'fax-store'}subscribestatecosttext=store.useSelector(state=>state.text);//fax-storesubscribeolystate.textchagecoststore=store.useStore();store.getState();//{text:'fax-store'}store.setState({text:'react-fax-store'});//orcostupdate=store.useUpdate();update({text:'react-fax-store'});retur<Store.Cosumer>{state=>cosole.log(state)}</Store.Cosumer>}<Store.Provider><App/></Store.Provider>createStore(iitialValue:()=>{}):Store;创建Store对象

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

fuctioIfo(){coststate=Store.useState();retur<div>{state}</div>}useSelector订阅指定数据

fuctioIfo(){coststate=Store.useSelector(state=>{retur{userame:state.userame}});retur<div>{state.userame}</div>}useUpdate更新数据

fuctioActio(){costupdate=Store.useUpdate(prevState=>{retur{userame:prevState.userame+'_xc'}});retur<buttooClick={update}>Add</butto>}useProvider别名：useStore

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

coststore=Store.useStore();store.getState();//orstore.setState(...)Cotext可直接通过React.useCotext获取数据

coststate=React.useCotext(Store.Cotext);iterfaceexporttypewithHooks=<T>(c:T)=>T;exporttypecreateStore=<TextedsRecord<strig|umber|symbol,ay>>(iitialValue:()=>T):Store<T>exporttypeUpdate<T={}>=<KextedskeyofT>(state:((prevState:Readoly<T>)=>Pick<T,K>|T|ull)|Pick<T,K>|T|ull)=>void;typeSubscriber<T={}>=(prevState:Readoly<T>,extState:Readoly<T>)=>void;typeUseSelector<T={}>=<Sexteds(state:T)=>ay>(selector:S)=>ReturType<S>;typeUseUpdate<T={}>=()=>Update<T>;typeUseState<T={}>=()=>T;typeUseProvider<T>=()=>Provider<T>;typeCosumer<T={}>=React.FC<CosumerProps<T>>;typeCotext<T>=React.Cotext<T>;iterfaceCosumerProps<T={}>{childre:(state:T)=>React.ReactElemet|ull;}iterfaceProvider<T={}>extedsReact.Compoet<{},T>{getSubscribeCout():umber;subscribe(subscriber:Subscriber<T>):()=>void;getState():T;}iterfaceStore<T={}>{Cotext:Cotext<T>;Provider:ew(props:{})=>Provider<T>;Cosumer:Cosumer<T>;useProvider:UseProvider<T>;useStore:UseProvider<T>;useState:()=>T;useSelector:UseSelector<T>;useUpdate:UseUpdate<T>;}Examplestore.js

import{createStore}from'react-fax-store';exportdefaultcreateStore(()=>{retur{ame:'react-fax-store';}});idex.js

importReactfrom'react'importStorefrom'./store';fuctioIfo(){coststate=Store.useState();retur<div>{state.ame}</div>}fuctioApp(){retur(<Store.Provider><Ifo/></Store.Provider>);}exportdefaultApp;

基于 React v16 的 Context 简单封装的轻量级状态库。安装 npm install --save react-fax-store 使用
import {createStor...

声明：本文仅代表作者观点，不代表本站立场。如果侵犯到您的合法权益，请联系我们删除侵权资源！如果遇到资源链接失效，请您通过评论或工单的方式通知管理员。未经允许，不得转载，本站所有资源文章禁止商业使用运营!

下载安装【程序员客栈】APP

实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

前往安装

react-fax-store 基于 React 的轻量级状态库开源项目

技术信息

作品详情

功能介绍

重点城市程序员兼职推荐

重点岗位程序员兼职推荐