react-fax-store基于 React 的轻量级状态库
基于 React v16 的 Context 简单封装的轻量级状态库。
安装
npm install --save react-fax-store
使用
import {createStore} from 'react-fax-store'; const Store = createStore(() => ({text: 'fax-store'})); function App(){ const data = React.useContext(Store.Context); // {text: 'fax-store'} subscribe state const state = store.useState(); // {text: 'fax-store'} subscribe state const text = store.useSelector( state => state.text ); // fax-store subscribe only state.text change const store = store.useStore(); store.getState(); // {text: 'fax-store'} store.setState({ text : 'react-fax-store' }); // or const update = 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 { ... } })
Store
Provider
<Store.Provider> ... </Store.Provider>
Consumer
<Store.Provider> ... <Store.Consumer> {state => { return <div>{state}</div> }} </Store.Consumer> ... </Store.Provider>
useState
订阅整个数据
function Info(){ const state = Store.useState(); return <div>{state}</div> }
useSelector
订阅指定数据
function Info(){ const state = Store.useSelector(state => { return { username: state.username } }); return <div>{state.username}</div> }
useUpdate
更新数据
function Action(){
const update = Store.useUpdate(prevState => {
return {
username: prevState.username + '_xc'
}
});
return <button onClick={update}>Add</button>
}
useProvider
别名:useStore
获取由Provider提供的store数据对象
const store = Store.useStore();
store.getState();
// or
store.setState(...)
Context
可直接通过React.useContext获取数据
const state = React.useContext(Store.Context);
interface
export type withHooks = <T>(c:T) => T; export type createStore = <T extends Record<string | number | symbol, any>>( initialValue: () => T ): Store<T> export type Update<T = {}> = <K extends keyof T>( state: ((prevState: Readonly<T>) => Pick<T, K> | T | null) | Pick<T, K> | T | null ) => void; type Subscriber<T = {}> = (prevState: Readonly<T>, nextState: Readonly<T>) => void; type UseSelector<T = {}> = <S extends (state: T) => any>(selector: S) => ReturnType<S>; type UseUpdate<T = {}> = () => Update<T>; type UseState<T = {}> = () => T; type UseProvider<T> = () => Provider<T>; type Consumer<T = {}> = React.FC<ConsumerProps<T>>; type Context<T> = React.Context<T>; interface ConsumerProps<T = {}> { children: (state: T) => React.ReactElement | null; } interface Provider<T = {}> extends React.Component<{}, T> { getSubscribeCount(): number; subscribe(subscriber: Subscriber<T>): () => void; getState(): T; } interface Store<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>; }
Example
store.js
import {createStore} from 'react-fax-store'; export default createStore(() => { return { name: 'react-fax-store'; } });
index.js
import React from 'react' import Store from './store'; function Info(){ const state = Store.useState(); return <div>{state.name}</div> } function App(){ return ( <Store.Provider> <Info /> </Store.Provider> ); } export default App;
评论
KUI for React基于 React 的 UI 组件库
KUIforReact是一个前端UI组件库,基于React,追求完美和性能高效,欢迎使用。安装使用npm方式安装npm install react-kui 使用 import React from '
KUI for React基于 React 的 UI 组件库
0
React FreezeReact 状态管理库
ReactFreeze是一个React状态管理库,可有效避免React的re-render,在不丢失组件和页面状态的情况下冻结组件树并将其替换为占位视图。值得注意的是,虽然冻结的组件树被替换为占位视图
React FreezeReact 状态管理库
0
KUI for React基于 React 的 UI 组件库
KUI for React 是一个前端 UI 组件库,基于 React,追求完美和性能高效,欢迎使用
KUI for React基于 React 的 UI 组件库
0