opp-store

State management for every frameworks.

Installation

Using npm:

$ npm install --save opp-store

Usage

In Front-End development, there are two kinds of state to manage: immutable (like: react), mutable (like: vue).They are incompatible to each other.

How do we achieve to share state in incompatible framewroks.Beacause we have two kinds of state at same time.Everytime you can state by setState.All kinds of state will be changed, just like they share state to each other.

import { createStore } from 'opp-store';

const initialState = {};
const store = createStore(initialState);

const listener = (state) => console.log(state?.name);
const unsubscribe = store.subscribe(listener);

store.setState({ name: 'xiaoshuang' }); // will trigger listener

const mutableState = store.getMutableState();
mutableState === initialState;
mutableState.name === 'xiaoshuang';

const immutableState = store.getImmutableState();
immutableState !== initialState;
immutableState.name === 'xiaoshuang';

Documentation

createStore

Create Store with initial state.

type Listener = (state: object) => void;

type Store = {
  setState: (state: object) => void;
  subscribe: (listener: Listener) => () => void;
  unsubscribe: (listener: Listener) => void;
  getMutableState: () => object;
  getImmutableState: () => object;
};

type createStore = (initialState: object) => Store;

Store.setState

Just like React.Component.setState, pass the partial state you wanna change.

type setState = (state: object) => void;

import { createStore } from 'opp-store';

const initialState = { age: 30, sex: 'M' };
const store = createStore(initialState);

store.setState({ age: 31 }); // { age: 31, sex: 'M' }
store.setState({ sex: 'F' }); // { age: 31, sex: 'F' }

Store.subscribe

Subcribe listener to store, and trigger it when state changed.Return callback to subscribe the listener you give.

type Listener = (state: object) => void;
type subscribe = (listener: Listener) => () => void;

import { createStore } from 'opp-store';

const initialState = {};
const store = createStore(initialState);

const unsubscribe = store.subscribe(console.log);

store.setState({ age: 30 }); // will log { age: 30 }
unsubscribe();
store.setState({ age: 31 }); // will log nothing

Store.unsubscribe

Unsubcribe listener from store.

type Listener = (state: object) => void;
type subscribe = (listener: Listener) => () => void;

import { createStore } from 'opp-store';

const initialState = {};
const store = createStore(initialState);

store.subscribe(console.log);
store.setState({ age: 30 }); // will log { age: 30 }

store.unsubscribe(console.log);
store.setState({ age: 31 }); // will log nothing

Store.getMutableState

type getMutableState = () => object;

import { createStore } from 'opp-store';

const initialState = {};
const store = createStore(initialState);

store.setState({ age: 30 });

const mutableState = store.getMutableState();

mutableState === initialState;

Store.getImmutableState

type getImmutableState = () => object;

import { createStore } from 'opp-store';

const initialState = {};
const store = createStore(initialState);

store.setState({ age: 30 });

const immutableState = store.getImmutableState();

immutableState !== initialState;
immutableState.age === initialState.age;

createPlugin

Create plugin with initial state, and register to opp-core by registerPlugin.

import { SyncHook, SyncBailHook } from 'opp-tapable';

type StorePluginHooks = {
  setState: new SyncHook(['source']),
  useStore: new SyncBailHook(['getter']),
  subscribe: new SyncBailHook(['listener']),
  getMutableState: new SyncBailHook([]),
  getImmutableState: new SyncBailHook([]),
};

type StorePlugin = Plugin & { hooks: StorePluginHooks };

type createPlugin = (initialState: object) => (plugin: Plugin) => StorePlugin;

import { createPlugin } from 'opp-store';
import { getPlugin, registerPlugin, start } from 'opp-core';

const store = createPlugin({})({ name: 'store' });

(async () => {
  registerPlugin(store);
  await start();

  getPlugin('store') === store.hooks;
})();

Plugin.hook.useStore

Front-End hook under Component lifecycle, for example: React-Hooks.

type Getter = (state: object) => any;

type useStore = (getter: Getter) => ReturnType<Getter>;

import { usePlugin } from 'opp-react';

const Input = (props) => {
  const store = usePlugin('store'); 

  const getter = (state = {}) => state.name;
  const value = store.useStore(getter);

  const onChange = (name) => store.setState({ name });

  return (
    <Input type="text" value={value} onChange={onChange} />
  );
};