当前位置：首页 > 软件库 > 程序开发 > 常用工具包 >

react-fax-store

基于 React 的轻量级状态库

授权协议 MIT

开发语言 JavaScript TypeScript

所属分类程序开发、常用工具包

软件类型开源软件

地区国产

投递者宋鸿

操作系统跨平台

开源组织无

适用人群未知

软件概览

基于 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;

使用案例

React_创建redux中的store_ZHOU125disorder_

创建redux中的store 1. 安装Redux 安装我就不写在这; 百度一下你就知道; 百度上面有很多; 2. 创建store 1. 在src目录下创建一个名字叫store的文件夹 2. 在store文件夹下创建一个名字叫index.js的文件 3. 在store文件夹下创建一个名字叫reducer.js的文件 4. 开始写代码 store文件夹下的index.js&&reducer文件
React 数据持久化 store.js

// 刷新页面的时候持久化的数据有重新存储到 reducer中 import { createStore, combineReducers, compose, applyMiddleware } from 'redux' import promise from 'redux-promise' import thunk from 'redux-thunk' // 数据持久化 import { pe