react-context-kv-store v1.0.0

react-context-global-store

INTRODUCTION

中文版

The react-context-global-store is a global state management library built on the React Context API (React version 16 or above).Using it you can build a global state repository just like redux and reference these global states in a simple way in your internal business components.It's very small (less than 300 lines after packaging) and has a clean API.

Installation

npm install react-context-global-store

Use It

Wrap your app with the Provider component and initialize your store with createStore: ※The first level substore can only be an object, and cannot be an array or other structure. You can use other data structures in the first level substore

// index.js

import React from 'react';
import ReactDom from 'react-dom';
import { createStore, StoreProvider } from 'react-context-global-store';
import App from './app';

const store = createStore({
    counter: { // 第一级子store必须是对象
        val: 0,
        pepols: [{ // 第二级子store可以是数组等其它数据结构
            name: 'Helen',
            age: 30,
        }],
    }
});

ReactDOM.render(
    <StoreProvider store={store}>
        <App />
    </StoreProvider>,
    document.getElementById('root')
);

Then use the connect method to connect your component to the store:

// app.js

import React from 'react';
import { connect } from 'react-context-global-store';

class App extends React.Component{
    constructor(props) {
        super(props)
    }
}

export default connect(App, ['counter'])

Finally use this.props.store inside the component to get the defined context and update your context with setStore Tips: Just like setState, you can pass in a callback function to get the updated context

// before

add() {
    const { val, pepols } = this.props.store.counter;
    pepols.push({
        name: 'john',
        age: 23,
    })
    this.props.setStore({
        counter: {
            val: val + 1,
            pepols,
        }
    }, () => {
        console.log(this.props.store.counter.val, this.props.store.counter.pepols); // new context
    });
}

render() {
    const { counter } = this.props.store;
    return (
        <div>
            {counter.val}
            <button onClick={() => this.add()}>add</button>
        </div>
    )
}

// after

Components

StoreProvider Component

Container component, you need to use this component to wrap your App component when creating an application.
It receives an initialized Store so that the child component uses the connect method to connect the component to the Store.

APIs

connect Function

Use this function to connect components to the Store

Params

• component { ReactComponent } Subcomponents that need to be connected
• stores { Array } Store name set to be obtained

createStore Function

Use this function to create a Store
※The first level substore can only be an object, and cannot be an array or other structure. You can use other data structures in the first level substore

Params

• store { Object } Store template, a normal object

AdapterStore Class

Create an AdapterStore; it will be automatically stored in localized storage such as localStorage after the state updated.
You can use the injectAdapter function to customize the storage method, or use the localStorage (library comes with) storage.

Params

• adapter { String } Adapter name, the library native support localStorage
• values { Object } Child Store

Example

import { AdapterStore, createStore } from 'react-context-global-store';

const store = createStore({
    counter: new AdapterStore('localStorage', {
        count: 0,
    })
});

injectAdapter Function

Custom adapter, if localStorage can't meet your needs, you can customize other storage methods.

Params

• customAdapter { Object } Custom storage, custom storage must have a get method and a set method; you can also use it to rewrite localStorage to improve your system performance

Example

import { injectAdapter, AdapterStore, createStore } from 'react-context-global-store';

injectAdapter({
    sessionStorage: {
        get(key) {
            return window.sessionStorage.getItem(key);
        },
        
        set(key, val) {
            window.sessionStorage.setItem(key, val);
        },
    }
})

const store = createStore({
    caches: new AdapterStore('sessionStorage', {
        count: 0,
    })
});