@efox/imook

基于immer和react hooks的轻量的局部状态管理，类比custom hook，@efox/imook强调基于功能设计store。

🎯 案例🎯
Counter	I18n	Todos

✨特性

+ 局部状态管理，精准定位store作用区间
+ 无this, 状态不可变
+ 支持异步action，修改状态简单化
+ 支持读写分离和定制更新(衍生数据)
+ 支持中断更新和批量更新同步逻辑

📦 安装

``sh
npm i @efox/imook
`

`sh
yarn add @efox/imook
`

⚡快速开始

#### 1. 定义一个local store
`tsx
import React from "react"
import { createLocalStore, ActUtil } from "@efox/imook";

// 创建counterStore
const initialState: number = 0
type CounterActUtil = ActUtil;

export default createLocalStore(initialState, {
inc({ commit }: CounterActUtil, step = 1) {
commit((draftStore) => {
draftStore.state += step;
})
},
});
`

#### 2. 使用和修改状态

`tsx
import counterSotre from "./counterStore"

function Counter() {
// 返回[state, actions]
const [count, { inc }] = counterStore.useStore()
return (

count:{count}
+

)
}

export default function Counter() {
return (



)
}
`

💡API

$3

createLocalStore接收初始状态initialState和用于修改状态的actionCreators，返回一个localStore对象

#### `actionCreators`
action生成器对象，属性为任意的函数，函数第一个参数默认为ActUtil（action的工具类）。
`ts
import { ActUtil } from "@efox/imook";
const actionCreators = {
actionName({commit, stateRef}: ActUtil, ...args: any[]) {
/**
* stateRef存储当前state的Ref
*/

// stateRef.current...

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

#### `localStore`
局部的store, 包含作用区间的Provider和对应的hooks方法；多个store之间可以通过imook暴露的withStores或Provider进行自动组合。
`tsx
import {createLocalStore, Provider, withStores} from "@efox/imook"

const localStore = createLocalStore(initialState, actionCreators [, subscriptions])
// 需要读写状态的组件使用useStore, 返回一个元组，包含state和actions对象
function Component() {
const [state, actions] = localStore.useStore()
// ...
}

// 只需要写状态的组件使用useActions, 返回一个actions对象，组件不会触发重渲染
function Component() {
const actions = localStore.useActions()
// ...
}

// 通过useSubscribe获取订阅项，参数为subscriptions的属性名
function Component() {
const xxx = localStore.useSubscribe('xxx')
// ...
}

// 不需要组合stores，直接用localStore提供的Provider包裹Component即可
export default function App() {
return (



)
}

// 组合stores
const stores = [localStore]

// 方式1：使用Provider
export default function App() {
return (



)
}
// 方式2：使用withStores
function App() {
return (

)
}
export default withStores(App, stores)
``