hooksux

Simple global store manager for react hooks.

hooks 版 react 轻量数据管理器

Install

# install
npm install hooksux -S

Notes

It's implementation principle is useContext-useReducer-hooks.

API

initStore

Instantiation

实例化

import { initStore } from 'hooksux';

initStore(reducers: any, oriState?: any, options?: any);

reducers

| Key | Required | Default | Note | |-----------|----------|--------------|-------------------------| | name | Yes | '' | Name of store, must be the unique | | reducer | No | [oriReducer] | Your custom reducer | | initState | No | {} | Initial structure of store |

oriState

Origin state, default is {}.

options

| Key | Required | Default | Note | |-----------|----------|--------------|-----------| | cover | No | false | Cover existing store when call initStore. Common scene is spa-route-switch |

getContext

Get context, dispatch

获取内容，更新内容

import React, { useContext } from 'react';
import { getContext } from 'hooksux';

const {
  state = {},
  dispatch,
} = useContext(getContext().Data);

Usage

The demo using the react by default, rax in the same way.

默认示例使用 react，rax 同理。

App.js

import React, { useMemo } from 'react';
import Child from './Child';
import { initStore } from 'hooksux';
import Data from './data';

export default () => {
  const Provider = useMemo(() => initStore(
    Data,
    {
      Data: {
        basic: {
          text: 'some text.'
        },
      }
    }
  ), []);

  return (
    <Provider>
      <div className="App">
        <Child />
      </div>
    </Provider>
  );
};

data.js

export default {
  name: 'Data',
  initState: {
    basic: {
      text: ''
    },
  },
};

Child

import React, { useContext } from 'react';

import { getContext } from 'hooksux';

export default () => {
  const {
    state = {},
    dispatch,
  } = useContext(getContext().Data);
  const updateTextEvt = () => {
    dispatch({
      type: 'update',
      payload: {
        basic: {
          text: 'after update.',
        },
      }
    });
    // `payload` can be array.
    // When it's array, `dispatch` will call `type` in turn for array's item.
  };
  return (
    <div className="Child">
      <p>{state.basic.text}</p>
      <button onClick={updateTextEvt}>Update text</button>
    </div>
  );
};

Extends

oriReducer

export default (state, action) => {
  const {
    type = '',
    payload = {},
  } = action;

  switch (type) {
    case 'update':
      state = _.deepMerge(state, payload);
      return {
        ...state,
      };
    default:
      return state;
  }
};

You can use custom reducer write by yourself:

export default (state, action) => {
  const {
    type = '',
    payload = {},
  } = action;

  switch (type) {
    case 'case1':
    case 'case2':
    default:
      return state;
  }
};

Then set Data = { name, reducer: YourReducer, initState, }.

Releases

0.1.x

0.1.0

• publish first Full Version