update

Author: frontlich

README.md

@@ -49,5 +49,6 @@ internal enhancers:
 
 other enhancers:
 
-- requestCache()
-- rx(...operators)
+- [immer()](https://frontlich.github.io/nice-store/#/zh-cn/internal-enhancer?id=immer)
+- [requestCache()](https://frontlich.github.io/nice-store/#/zh-cn/internal-enhancer?id=requestCache)
+- [rx(...operators)](https://frontlich.github.io/nice-store/#/zh-cn/internal-enhancer?id=rx)

build-enhancers.mjs

@@ -25,7 +25,7 @@ async function build() {
         write: true,
         bundle: true,
         treeShaking: true,
-        external: ['rxjs'],
+        external: ['rxjs', 'immer'],
         define: {
           'process.env.NODE_ENV': 'process.env.NODE_ENV',
         },

docs/zh-cn/custom-enhancer.md

@@ -1 +1,52 @@
 # 自定义增强器
+
+如果内置的一些增强器不满足需求，我们还可以自定义增强器
+
+自定义增强器既可以是定义新的增强器，也可以是组合现有的增强器
+
+## 定义新的增强器
+
+```ts
+export type EnhancedStore<State, Ext> = Store<State> & Ext;
+
+export type CreateStore<S, Ext> = (initialState?: S) => EnhancedStore<S, Ext>;
+
+export type NextEnhancer<S, Ext1, Ext2 = Ext1> = (
+  createStore: CreateStore<S, Ext1>
+) => CreateStore<S, Ext1 & Ext2>;
+```
+
+一个 Enhancer 是一个形如`(createStore) => (initialState) => store`的函数
+
+举例：
+
+```js
+export const logger = (createStore) => (initialState) => {
+  const store = createStore();
+
+  const setState = (update) => {
+    if (typeof update === "function") {
+      store.setState((state) => {
+        const newState = update(state);
+        console.log("log from logger enhancer:", newState);
+        return newState;
+      });
+    } else {
+      console.log("log from logger enhancer:", update);
+      store.setState(update);
+    }
+  };
+
+  return {
+    ...store,
+    setState,
+  };
+};
+```
+
+## 组合现有的增强器
+
+```js
+import { pipe, reset, thunk } from "nice-store";
+export const myEnhancer = pipe(reset(), thunk());
+```

docs/zh-cn/internal-enhancer.md

@@ -261,3 +261,74 @@ const Counter = () => {
   );
 };
 ```
+
+# 可选的增强器
+
+## immer
+
+`immer()`
+
+immer 增强器可以更方便地更新 state，它会给 store 增加一个 produce 方法，可以通过直接修改值来更新数据
+
+用法
+
+```js
+import { createStore } from "nice-store";
+import { immer } from "nice-store/enhancers";
+
+const store = createStore({ a: 1, b: 2 }, immer());
+
+// 订阅state更新事件
+store.subscribe(console.log);
+
+store.produce((s) => {
+  s.a = 3;
+});
+```
+
+## requestCache
+
+`requestCache()`
+
+requestCache 增强器会给 store 添加一个 withCache 方法，调用 withCache 会返回一个 options 对象，在 ahooks 的 useRequest 配置项中使用该对象，可以将请求的数据缓存到 store 中
+
+用法
+
+```js
+import { createStore } from "nice-store";
+import { requestCache } from "nice-store/enhancers";
+import { useRequest } from "ahooks";
+
+const store = createStore(0, requestCache());
+
+// 订阅state更新事件
+store.subscribe(console.log);
+
+useRequest(() => Promise.resolve(1), store.withCache());
+```
+
+## rx
+
+`rx(...operators)`
+
+rx 增强器会给 store 添加 next 方法，调用 next 方法会走所有的 rxjs 的操作符，最终更新 store 的状态
+
+```js
+import { createStore } from "nice-store";
+import { rx } from "nice-store/enhancers";
+import { map, scan } from "rxjs/operators";
+
+const store = createStore(
+  0,
+  rx(
+    map((v: string) => Number(v)),
+    scan((acc, v) => acc + v)
+  )
+);
+
+// 订阅state更新事件
+store.subscribe(console.log);
+
+store.next("1"); // log 1
+store.next("2"); // log 3
+```

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nice-store",
   "description": "lite & flexible & extensible state management for react",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "author": "frontlich",
   "keywords": [
     "state management",

src/createStore.ts

@@ -123,6 +123,7 @@ export function createStore<
   enhancer7: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6, Ext7>,
   enhancer8: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7, Ext8>,
   enhancer9: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7 & Ext8, Ext9>,
+  ...enhancers: NextEnhancer<State, any>[]
 ): EnhancedStore<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7 & Ext8 & Ext9>;
 
 export function createStore<State>(initialState?: State, ...enhancers: Enhancer<State, any>[]) {

src/enhancers/immer.ts

@@ -17,9 +17,7 @@ export function immer<State, PreExt>(): NextEnhancer<State, PreExt, Ext<State>>
 
     return {
       ...store,
-      produce: (recipe) => {
-        store.setState((state) => immerProduce(state, (draft) => void recipe(draft)));
-      },
+      produce: (recipe) => store.setState(immerProduce(recipe)),
     };
   };
 }

src/enhancers/index.ts

@@ -1,2 +1,3 @@
 export { requestCache } from './requestCache';
 export { rx } from './rx';
+export { immer } from './immer';

src/enhancers/rx.ts

@@ -40,6 +40,25 @@ export function rx<State, PreExt, T1, T2, T3, T4, T5>(
   operator5: OperatorFunction<T5, State>,
 ): NextEnhancer<State, PreExt, Ext<T1>>;
 
+export function rx<State, PreExt, T1, T2, T3, T4, T5, T6>(
+  operator1: OperatorFunction<T1, T2>,
+  operator2: OperatorFunction<T2, T3>,
+  operator3: OperatorFunction<T3, T4>,
+  operator4: OperatorFunction<T4, T5>,
+  operator5: OperatorFunction<T5, T6>,
+  operator6: OperatorFunction<T6, State>,
+): NextEnhancer<State, PreExt, Ext<T1>>;
+
+export function rx<State, PreExt, T1, T2, T3, T4, T5, T6, T7>(
+  operator1: OperatorFunction<T1, T2>,
+  operator2: OperatorFunction<T2, T3>,
+  operator3: OperatorFunction<T3, T4>,
+  operator4: OperatorFunction<T4, T5>,
+  operator5: OperatorFunction<T5, T6>,
+  operator6: OperatorFunction<T6, T7>,
+  operator7: OperatorFunction<T7, State>,
+): NextEnhancer<State, PreExt, Ext<T1>>;
+
 export function rx<State, PreExt, Next>(
   ...operators: any[]
 ): NextEnhancer<State, PreExt, Ext<Next>> {

src/react.ts

@@ -104,6 +104,31 @@ export function create<
   enhancer8: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7, Ext8>,
 ): Result<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7 & Ext8>;
 
+export function create<
+  State,
+  Ext1 = {},
+  Ext2 = {},
+  Ext3 = {},
+  Ext4 = {},
+  Ext5 = {},
+  Ext6 = {},
+  Ext7 = {},
+  Ext8 = {},
+  Ext9 = {},
+>(
+  initialState: State,
+  enhancer1: Enhancer<State, Ext1>,
+  enhancer2: NextEnhancer<State, Ext1, Ext2>,
+  enhancer3: NextEnhancer<State, Ext1 & Ext2, Ext3>,
+  enhancer4: NextEnhancer<State, Ext1 & Ext2 & Ext3, Ext4>,
+  enhancer5: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4, Ext5>,
+  enhancer6: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5, Ext6>,
+  enhancer7: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6, Ext7>,
+  enhancer8: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7, Ext8>,
+  enhancer9: NextEnhancer<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7 & Ext8, Ext9>,
+  ...enhancers: NextEnhancer<State, any>[]
+): Result<State, Ext1 & Ext2 & Ext3 & Ext4 & Ext5 & Ext6 & Ext7 & Ext8>;
+
 export function create<State>(initialState?: State, ...enhancers: Enhancer<State, any>[]) {
   const store = (createStore as any)(initialState, ...enhancers, selectorHook());