状态管理 - useStore

为什么需要状态管理？

• 数据中心化管理。数据流向可预测，暴露出特定函数来操作数据。
• 数据持久化管理。在各个模块中都能共享数据，减少请求或计算。
• 数据同步化管理。实时更新数据，数据发生变更可实时更新状态。

flux 架构

flux 是一种架构思想，用来解决数据结构问题，类似于 MVC 架构，flux 核心理念是单向数据流。

• View：视图层 UI State。
• Action：动作行为描述。
• Dispatcher：事件派发器。
• Store：数据中心。

用户在 View 层发起一个 Action 对象给 Dispatcher，Dispatcher 接收到 Action 并要求 Store 做相应的更改，Store 做出相对应更新，然后发出一个 changeEvent，View 接收到 changeEvent 事件后，更新页面。

简单实现

发布订阅模式

用于实时更新数据。

• on：订阅数据
• emit：发布数据
• off：取消订阅

const emitter = () => {
  const hub = {};
  const on = (name, cb) => {
    if (!hub[name]) {
      hub[name] = [];
    }
    if (hub[name].indexOf(cb) === -1) {
      hub[name].push(cb);
    }
  };
  const emit = (name, data) => {
    if (hub[name]) {
      hub[name].map(cb => cb(data));
    }
  };
  const off = (name, cb) => {
    if (hub[name]) {
      const index = hub[name].indexOf(cb);
      if (index > -1) {
        hub[name].splice(index, 1);
      }
    }
  };
  return {on, emit, off};
};

createStore

提供数据操作函数。

• getState：获取数据
• setState：更新数据
• subscribe：订阅数据
• unsubscribe：取消订阅

const createStore = () => {
  const {on, emit, off} = emitter();
  const store = {};
  const getState = name => clone(store[name]);
  const setState = state => {
    if (typeof state === 'function') {
      state = state(clone(store));
    }
    const newState = clone(state);
    Object.keys(newState).map(key => {
      const oldItem = store[key];
      const newItem = newState[key];
      const item = isObject(newItem) && isObject(oldItem) ? mergeOwnProp(oldItem, newItem) : newItem;
      store[key] = item;
    });
  };
  const subscribe = (name, cb) => {
    on(name, cb);
    return () => off(name, cb);
  };
  return {getState, setState, subscribe, unsubscribe: off};
};

useStore

import {createStore} from '@huxy/utils';

const store = createStore();

const createContainer = store => (name, initState) => {
  const [state, setState] = useState(initState);
  const update = useCallback(result => store.setState({[name]: typeof result === 'function' ? result(store.getState(name)) : result}), []);
  const subscribe = useCallback(callback => store.subscribe(name, callback), []);
  const clean = useCallback((name = name) => store.clean(name), []);
  useEffect(() => {
    store.subscribe(name, result => setState(result));
  }, []);
  return [state, update, subscribe, clean];
};

const useStore = createContainer(store);

使用

直接引用：

import {store} from '@huxy/utils';
import {useStore} from '@huxy/use';

自定义 store ：

import {createStore, createContainer} from '@huxy/utils';
import {createContainer as createUseContainer} from '@huxy/use';

export const container = createStore();

export const store = createContainer(container);
export const useStore = createUseContainer(container);

store 配置

定义：

import {useStore} from '@huxy/use';
// names
export const langName = 'lang-store';
export const themeName = 'theme-store';
export const menuTypeName = 'menuType-store';
export const i18nsName = 'i18ns-store';
export const userInfoName = 'userInfo-store';
export const permissionName = 'permission-store';
export const routersName = 'routers-store';
// stores
export const useLangStore = initState => useStore(langName, initState);
export const useMenuTypeStore = initState => useStore(menuTypeName, initState);
export const useThemeStore = (initState = {}) => useStore(themeName, initState);
export const useI18nsStore = (initState = {}) => useStore(i18nsName, initState);
export const useUserInfoStore = (initState = {}) => useStore(userInfoName, initState);
export const usePermissionStore = (initState = []) => useStore(permissionName, initState);
export const useRoutersStore = (initState = []) => useStore(routersName, initState);

使用示例：

import {useI18nsStore} from '@app/store/stores';

const Intls = ({keys, children}) => {
  const [i18ns] = useI18nsStore();
  return (keys && i18ns.getValue(keys)) ?? children ?? '';
};

export default Intls;

使用示例

例如：使用 useStore 来管理已读未读消息，未读消息数量在头部 nav 栏展示，当进入消息列表页面并查看消息时，实时更新 nav 栏未读信息条数。

nav 栏未读消息数量：

const Notify = props => {
  const {router} = useRoute();
  const [, , subscribe] = useStore('huxy-notify', []);
  const [count, setCount] = useState(0);
  useEffect(() => {
    const getMes = async () => {
      const {result} = await apiList.listMessage({current: 1, size: 1000});
      const mes = (result?.list ?? []).filter(item => item.active == 0);
      setCount(mes.length);
    };
    const cancelSub = subscribe(result => {
      const mes = (result ?? []).filter(item => item.active == 0);
      setCount(mes.length);
    });
    getMes();
    return cancelSub;
  }, []);
  const handleClick = e => {
    router.push({
      path: '/playground/messages',
      state: {tab: 0},
    });
  };
  return (
    <a className="notify-item" title="notify" onClick={handleClick}>
      <span className="node-icon">
        <Badge count={count} size="small">
          <BellOutlined />
        </Badge>
      </span>
    </a>
  );
};

消息列表：

const MessageList = props => {
  const historyState = props.history.getState?.();
  const [, setNotify] = useStore('huxy-notify');
  const [active, setActive] = useState(historyState?.tab ?? 1);

  const handleCheck = async item => {
    const items = item ? [item] : selectedRows;
    const ids = items.map(v => v._id);
    const {code, result, message: msg} = await apiList.markActived({ids});
    if (code === 200) {
      setNotify(result);
      message.success(msg);
      setSelectedRows([]);
      update({current: 1});
    }
  };
  ...
  return (
    <div className="messages-list">
      <TabHeader tabs={tabs} switchTab={switchTab} activekey={active} />
      <List {...tableProps} />
    </div>
  );
};