imook

基于immer和React Hooks的轻量的局部状态管理。

✨特性

• 局部Store，全局单一实例，精准定位store作用区间
• 轻量，API简单化，类型提示友好
• 无this, 状态不可变
• 支持异步action，修改状态简单化
• 支持读写分离和定制更新(衍生数据)
• 支持中断更新
• 同步逻辑批量更新

📦 安装

npm i imook

yarn add imook

⚡快速开始

1. 定义一个Store

import createLocalStore from "imook";

const initialState = 0;

const counterStore = createLocalStore(
  initialState,
  ({ commit, get }) => ({
    inc(step: number = 1) {
      commit((draftStore) => {
        draftStore.state += step;
      });
    }
  }),
  {
    uniqueKey:  "counterStore",
  }
);

export default counterStore;

2. 获取和修改状态

import counterStore from "./counterStore";

function Counter() {
  // 通过useState API获取状态
  const count = counterStore.useState();
  return (
    <div>
      count:{count}
      <button
        onClick={() => {
          // 通过actions修改状态
          counterStore.actions.inc();
        }}
      >
        +
      </button>
    </div>
  );
}

export default Counter;

💡API

createLocalStore(initialState, actionCreator, option)

createLocalStore接收初始状态initialState和actions的生成器actionCreator，还有标识全局单一实例的uniqueKey等option配置，返回一个Store对象。

actionCreator

action生成器函数，接收工具类对象ActionUtils作为参数，返回actions

const actionCreator = ({ commit, get }) => ({
  /**
   * get 用于获取当前的状态；
   * commit 用于修改状态, 接受一个函数updater作为参数,updater和immer中的produce的第二个参数保持一致,通过操作draftStore.state完成对state的修改
   */
  xxAction() {
    const {state} = get()
    commit((draftStore) => {
      // draftStore.state...
    });
  }
})

localStore.useState(...overloads)

调用Store对象返回的useState获取状态，通过重载支持多种形式获取，通过这种方式在状态变更会订阅更新，和React Hooks一样，该API必须在Function Component中使用。

• const state = localStore.useState()

  • 不带参数，直接返回状态
  • 状态改变时直接更新

• const state = localStore.useState(isDeepEqual)

  • 只有isDeepEqual（布尔值）一个参数，直接返回状态
  • isDeepEqual为false，状态改变时直接更新
  • isDeepEqual为true，状态改变时深比较前后两次状态，值不同时才更新

• const derivedState = localStore.useState(mapStateFn)

  • 只有mapStateFn一个参数，mapStateFn以state作为参数，可自定义返回的状态
  • 状态改变时浅比较前后两次的衍生状态，值不同时才更新

• const derivedState = localStore.useState(mapStateFn, isDeepEqual)

  • 第一个参数为mapStateFn，以state作为参数，可自定义返回的状态
  • 第二个参数为isDeepEqual，决定是否深比较前后两次的衍生状态，值不同时才更新

localStore.actions.xxx

调用Store对象返回的actions来修改状态，修改状态不限制使用方式。

/**
 * 直接在FC中使用
 */
function IncButton() {
  return (
      <button
        onClick={() => {
          counterStore.actions.inc();
        }}
      >
        +
      </button>
  );
}

/**
 * 基于actions自定义特定功能的actions
 */
const inc = counterStore.actions.inc

const inc10 = () => inc(10)

const dbInc = () => {
  inc()
  inc()
}

/**
 * 基于actions定义Custom Hooks
 */
const useVisibleTodos = () => {
  const todos = todosStore.useState()
  const filter = visibilityFilterStore.useState()
  const visibleTodos = getVisibleTodos(todos, filter)
    return {
    visibleTodos: visibleTodos as Todo[],
    toggleTodo: todosStore.actions.toggleTodo
  }
}

localStore.getState()

调用Store对象返回的getState获取当前的状态，值得注意的是这种方式不会订阅更新，它就像是一个内置的action，可在任何地方使用。

function IncButton() {
  return (
      <button
        onClick={() => {
          // 获取当前的状态
          const currState = counterStore.getState();
          if(currState...) ...
          counterStore.actions.inc();
        }}
      >
        +
      </button>
  );
}