@huslx/react-state v1.0.7

a light library for react to manage app state;

Getting Started

• Install with npm

npm install @huslx/react-state

• Install with yarn

yarn add @huslx/react-state

Usage

1. create a model file, here is a example

import { getUser } from '@/utils/localCache.util';

const namespace = 'user';

export function useUserActions({ dispatch }) {
  return {
    setUser(v) {
      dispatch({
        type: `${namespace}/setUser`,
        payload: v,
      });
    },
  };
}

export default {
  name: namespace,
  state: {
    user: getUser(),
  },
  actions: {
    setUser(state, payload) {
      return {
        ...state,
        user: payload,
      };
    },
  },
};

2. merge models to a store

import userModal from './user';
import globalModal from './global';

export default [userModal, globalModal];

3. pass store to App Provider

import React from 'react';
import ReactDom from 'react-dom';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import { Provider } from '@huslx/react-state';
import stores from '@/model';
import App from './App';

ReactDom.render(
  <Provider stores={stores}>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </Provider>,
  document.getElementById('root')
);

4. connect models to component

import { connect } from "@huslx/react-state";

// connect a model which namespace is "global"
// map global state to props
// pass props to BasicLayout component

export default connect(({ global }) => ({
  pageScrollProps: global.pageScrollProps,
}))(BasicLayout);