extra-react-store 0.1.0 → 0.1.2

package/README.md

@@ -15,21 +15,21 @@ interface IState {
   count: number
 }
 
-const context = createStoreContext<IState>()
+const Context = createStoreContext<IState>()
 
 function App() {
   const store = useMemo<Store<IState>>(() => new Store({ count: 0 }), [])
 
   return (
-    <context.Provider value={store}>
+    <Context.Provider value={store}>
       <Viewer />
       <Controller />
-    </context.Provider>
+    </Context.Provider>
   )
 }
 
 function Viewer() {
-  const count = useSelector(context, state => state.count)
+  const count = useSelector(Context, state => state.count)
 
   return (
     <span>{count}</span>
@@ -37,7 +37,7 @@ function Viewer() {
 }
 
 function Controller() {
-  const update = useUpdater<IState>(context)
+  const update = useUpdater<IState>(Context)
 
   return (
     <button onClick={() => update(increment)}>Increment</button>
@@ -86,3 +86,14 @@ import { Updater } from 'use-immer'
 
 function useUpdater<State>(context: StoreContext<State>): Updater<State>
 ```
+
+### usePartialUpdater
+```ts
+import { Updater } from 'use-immer'
+
+function usePartialUpdater<State, PartialState>(
+  context: StoreContext<State>
+, extractPartialState: (state: State) => PartialState
+, mergePartialState: (state: State, partialState: PartialState) => State
+): Updater<PartialState>
+```

package/lib/index.d.ts

@@ -3,3 +3,4 @@ export * from './store.js';
 export * from './create-store-context.js';
 export * from './use-selector.js';
 export * from './use-updater.js';
+export * from './use-partial-updater.js';

package/lib/index.js

@@ -3,4 +3,5 @@ export * from './store.js';
 export * from './create-store-context.js';
 export * from './use-selector.js';
 export * from './use-updater.js';
+export * from './use-partial-updater.js';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA"}

package/lib/use-partial-updater.d.ts

@@ -0,0 +1,3 @@
+import { Updater } from 'use-immer';
+import { StoreContext } from './types.js';
+export declare function usePartialUpdater<State, PartialState>(context: StoreContext<State>, extractPartialState: (state: State) => PartialState, mergePartialState: (state: State, partialState: PartialState) => State): Updater<PartialState>;

package/lib/use-partial-updater.js

@@ -0,0 +1,22 @@
+import { useCallback, useContext } from 'react';
+import { produce } from 'immer';
+import { go, isFunction } from '@blackglory/prelude';
+export function usePartialUpdater(context, extractPartialState, mergePartialState) {
+    const store = useContext(context);
+    const updater = useCallback(newStateOrFn => {
+        const oldState = store.getState();
+        const newPartialState = go(() => {
+            if (isFunction(newStateOrFn)) {
+                const fn = newStateOrFn;
+                return produce(extractPartialState(oldState), fn);
+            }
+            else {
+                const newState = newStateOrFn;
+                return newState;
+            }
+        });
+        store.setState(mergePartialState(oldState, newPartialState));
+    }, [store, extractPartialState, mergePartialState]);
+    return updater;
+}
+//# sourceMappingURL=use-partial-updater.js.map

package/lib/use-partial-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-partial-updater.js","sourceRoot":"","sources":["../src/use-partial-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,iBAAiB,CAC/B,OAA4B,EAC5B,mBAAmD,EACnD,iBAAsE;IAEtE,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAA0B,WAAW,CAAC,YAAY,CAAC,EAAE;QAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAA;QAEjC,MAAM,eAAe,GAAiB,EAAE,CAAC,GAAG,EAAE;YAC5C,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,YAAY,CAAA;gBACvB,OAAO,OAAO,CAAC,mBAAmB,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,CAAA;aAClD;iBAAM;gBACL,MAAM,QAAQ,GAAG,YAAY,CAAA;gBAC7B,OAAO,QAAQ,CAAA;aAChB;QACH,CAAC,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC,iBAAiB,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAA;IAC9D,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,CAAC,CAAC,CAAA;IAEnD,OAAO,OAAO,CAAA;AAChB,CAAC"}

package/lib/use-selector.js

@@ -7,7 +7,7 @@ export function useSelector(context, selector) {
             const newValue = selector(state);
             setValue(newValue);
         });
-    }, [store, value]);
+    }, [store, selector, value]);
     return value;
 }
 //# sourceMappingURL=use-selector.js.map

package/lib/use-selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC;IAEjC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAGhC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAA;IAElB,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"use-selector.js","sourceRoot":"","sources":["../src/use-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGvD,MAAM,UAAU,WAAW,CACzB,OAA4B,EAC5B,QAAiC;IAEjC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAA;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE;YAC7B,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;YAGhC,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAA;IAE5B,OAAO,KAAK,CAAA;AACd,CAAC"}

package/lib/use-updater.js

@@ -1,22 +1,5 @@
-import { useCallback, useContext } from 'react';
-import { produce } from 'immer';
-import { go, isFunction } from '@blackglory/prelude';
+import { usePartialUpdater } from './use-partial-updater.js';
 export function useUpdater(context) {
-    const store = useContext(context);
-    const updater = useCallback(newStateOrFn => {
-        const state = go(() => {
-            if (isFunction(newStateOrFn)) {
-                const fn = newStateOrFn;
-                const newState = produce(store.getState(), fn);
-                return newState;
-            }
-            else {
-                const newState = newStateOrFn;
-                return newState;
-            }
-        });
-        store.setState(state);
-    }, [store]);
-    return updater;
+    return usePartialUpdater(context, state => state, (_, value) => value);
 }
 //# sourceMappingURL=use-updater.js.map

package/lib/use-updater.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-updater.js","sourceRoot":"","sources":["../src/use-updater.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGpD,MAAM,UAAU,UAAU,CAAQ,OAA4B;IAC5D,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,CAAA;IAEjC,MAAM,OAAO,GAAmB,WAAW,CAAC,YAAY,CAAC,EAAE;QACzD,MAAM,KAAK,GAAG,EAAE,CAAC,GAAG,EAAE;YACpB,IAAI,UAAU,CAAC,YAAY,CAAC,EAAE;gBAC5B,MAAM,EAAE,GAAG,YAAY,CAAA;gBACvB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAA;gBAC9C,OAAO,QAAQ,CAAA;aAChB;iBAAM;gBACL,MAAM,QAAQ,GAAG,YAAY,CAAA;gBAC7B,OAAO,QAAQ,CAAA;aAChB;QACH,CAAC,CAAC,CAAA;QACF,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,OAAO,CAAA;AAChB,CAAC"}
+{"version":3,"file":"use-updater.js","sourceRoot":"","sources":["../src/use-updater.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAE5D,MAAM,UAAU,UAAU,CAAQ,OAA4B;IAC5D,OAAO,iBAAiB,CACtB,OAAO,EACP,KAAK,CAAC,EAAE,CAAC,KAAK,EACd,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,CACpB,CAAA;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "extra-react-store",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "keywords": [],
   "files": [

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './store.js'
 export * from './create-store-context.js'
 export * from './use-selector.js'
 export * from './use-updater.js'
+export * from './use-partial-updater.js'

package/src/use-partial-updater.ts

@@ -0,0 +1,31 @@
+import { useCallback, useContext } from 'react'
+import { Updater } from 'use-immer'
+import { produce } from 'immer'
+import { go, isFunction } from '@blackglory/prelude'
+import { StoreContext } from './types.js'
+
+export function usePartialUpdater<State, PartialState>(
+  context: StoreContext<State>
+, extractPartialState: (state: State) => PartialState
+, mergePartialState: (state: State, partialState: PartialState) => State
+): Updater<PartialState> {
+  const store = useContext(context)
+
+  const updater: Updater<PartialState> = useCallback(newStateOrFn => {
+    const oldState = store.getState()
+
+    const newPartialState: PartialState = go(() => {
+      if (isFunction(newStateOrFn)) {
+        const fn = newStateOrFn
+        return produce(extractPartialState(oldState), fn)
+      } else {
+        const newState = newStateOrFn
+        return newState
+      }
+    })
+
+    store.setState(mergePartialState(oldState, newPartialState))
+  }, [store, extractPartialState, mergePartialState])
+
+  return updater
+}

package/src/use-selector.ts

@@ -15,7 +15,7 @@ export function useSelector<State, Value>(
       // 若新旧状态引用相等, 不会发生重新渲染.
       setValue(newValue)
     })
-  }, [store, value])
+  }, [store, selector, value])
 
   return value
 }

package/src/use-updater.ts

@@ -1,25 +1,11 @@
-import { useCallback, useContext } from 'react'
 import { Updater } from 'use-immer'
-import { produce } from 'immer'
-import { go, isFunction } from '@blackglory/prelude'
 import { StoreContext } from './types.js'
+import { usePartialUpdater } from './use-partial-updater.js'
 
 export function useUpdater<State>(context: StoreContext<State>): Updater<State> {
-  const store = useContext(context)
-
-  const updater: Updater<State> = useCallback(newStateOrFn => {
-    const state = go(() => {
-      if (isFunction(newStateOrFn)) {
-        const fn = newStateOrFn
-        const newState = produce(store.getState(), fn)
-        return newState
-      } else {
-        const newState = newStateOrFn
-        return newState
-      }
-    })
-    store.setState(state)
-  }, [store])
-
-  return updater
+  return usePartialUpdater(
+    context
+  , state => state
+  , (_, value) => value
+  )
 }