react-fax-store 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
react-fax-store 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: MIT
开发语言: JavaScript TypeScript
操作系统: 跨平台
收录时间: 2020-04-07
提 交 者: 随心_

基于 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;
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

react-fax-store 的相关资讯

还没有任何资讯

react-fax-store 的相关博客

使用 store 来优化 React 组件

<p>在使用 React 编写组件的时候,我们常常会碰到两个不同的组件之间需要共享状态情况,而通常的做法就是<a href="https://re...

mobx-react 多个store 和 全局状态

和context配合确实很方便, 只是对于所有的函数式组件需要用observer包装一层有点难受 为什么js没有函数装饰器啊啊啊啊啊 不过...

React-使用imutable.js来管理store中的数据

reducer.js中store的数据是不能改变的,用原始的方法要手动的保证store不被修改,存在风险。imutable.js可以生成一个不可改变...

【React Vuex】----store的创建方式

React:   flux: 从events模块引入 emit on 方法 import EventEmitter from 'events' 合并对象 const Store = Object.as...

react-redux 如何在子组件里访问store对象

1. 要在constructor-super里接收context对象 2. 给组件(class / pure function)指定contextType属性,用来接收store对象 以下...

RPA之眼:AI-OCR,Fax-OCR概述

文丨马磊 OCR是一种与RPA机器人协作的一项重要技术,相当于机器人的眼睛。 OCR是英文“Optical Character Recognition/Reade...

React进阶(3)-上手实践Redux-如何更改store中的数据

https://juejin.im/post/5e44cd806fb9a07c7c2d54c6 前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,...

React进阶(3)-上手实践Redux-如何更改store中的数据

https://juejin.im/post/5e44cd806fb9a07c7c2d54c6 前言 在前面的一文React进阶(2)-上手实践Redux-如何获取store的数据当中,...

store

Besides indexing the values of a field, you can also choose to store the original field value for later retrieval . U...

store.

分布式系统: https://queue.acm.org/detail.cfm?id=2482856

react-fax-store 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
1 收藏
分享
返回顶部
顶部