Comparing version 1.16.2 to 1.17.0
@@ -72,4 +72,4 @@ import { IPullstateAllStores } from "./PullstateCore"; | ||
} | ||
export interface IAsyncActionUseOptions extends IAsyncActionWatchOptions { | ||
onSuccess?: () => void; | ||
export interface IAsyncActionUseOptions<R> extends IAsyncActionWatchOptions { | ||
onSuccess?: (result: R) => void; | ||
} | ||
@@ -105,3 +105,3 @@ export interface IAsyncActionRunOptions<S extends IPullstateAllStores = any> { | ||
} | ||
export declare type TAsyncActionUse<A, R, T extends string> = (args?: A, options?: IAsyncActionUseOptions) => TUseResponse<R, T>; | ||
export declare type TAsyncActionUse<A, R, T extends string> = (args?: A, options?: IAsyncActionUseOptions<R>) => TUseResponse<R, T>; | ||
export declare type TAsyncActionBeckon<A, R, T extends string> = (args?: A, options?: IAsyncActionBeckonOptions) => TPullstateAsyncBeckonResponse<R, T>; | ||
@@ -108,0 +108,0 @@ export declare type TAsyncActionWatch<A, R, T extends string> = (args?: A, options?: IAsyncActionWatchOptions) => TPullstateAsyncWatchResponse<R, T>; |
@@ -11,3 +11,4 @@ import { useStoreState } from "./useStoreState"; | ||
import { registerInDevtools } from "./reduxDevtools"; | ||
import { useLocalStore } from "./useLocalStore"; | ||
export * from "./async-types"; | ||
export { useStoreState, useStoreStateOpt, update, Store, InjectStoreState, InjectStoreStateOpt, PullstateProvider, useStores, useInstance, createPullstateCore, createAsyncAction, createAsyncActionDirect, successResult, errorResult, IPullstateInstanceConsumable, IPullstateAllStores, InjectAsyncAction, EAsyncActionInjectType, TInjectAsyncActionProps, TUpdateFunction, TStoreAction, TMultiStoreAction, PullstateContext, TUseResponse, registerInDevtools, }; | ||
export { useStoreState, useStoreStateOpt, useLocalStore, update, Store, InjectStoreState, InjectStoreStateOpt, PullstateProvider, useStores, useInstance, createPullstateCore, createAsyncAction, createAsyncActionDirect, successResult, errorResult, IPullstateInstanceConsumable, IPullstateAllStores, InjectAsyncAction, EAsyncActionInjectType, TInjectAsyncActionProps, TUpdateFunction, TStoreAction, TMultiStoreAction, PullstateContext, TUseResponse, registerInDevtools, }; |
@@ -84,2 +84,14 @@ import isEqual from'fast-deep-equal/es6';import React,{useRef,useState,useEffect,useContext,useMemo}from'react';import produce$1,{enablePatches,produceWithPatches,produce,applyPatches}from'immer';const onServer = typeof window === "undefined"; | ||
return subState; | ||
}function useLocalStore(initialState, deps) { | ||
const storeRef = useRef(); | ||
if (storeRef.current == null) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
if (deps !== undefined) { | ||
const prevDeps = useRef(deps); | ||
if (!isEqual(deps, prevDeps)) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
} | ||
return storeRef.current; | ||
}enablePatches(); | ||
@@ -265,2 +277,8 @@ function makeSubscriptionFunction(store, watch, listener) { | ||
} | ||
useLocalCopyInitial(deps) { | ||
return useLocalStore(() => this.initialState, deps); | ||
} | ||
useLocalCopySnapshot(deps) { | ||
return useLocalStore(this.currentState, deps); | ||
} | ||
act(action) { | ||
@@ -994,3 +1012,3 @@ action((u, p) => this.batch(u, p)); | ||
if (isSuccess && !dormant) { | ||
onSuccess(); | ||
onSuccess(result.payload); | ||
} | ||
@@ -1232,2 +1250,2 @@ }, [isSuccess]); | ||
} | ||
}export{EAsyncActionInjectType,EAsyncEndTags,EPostActionContext,InjectAsyncAction,InjectStoreState,InjectStoreStateOpt,PullstateContext,PullstateProvider,Store,createAsyncAction,createAsyncActionDirect,createPullstateCore,errorResult,registerInDevtools,successResult,update,useInstance,useStoreState,useStoreStateOpt,useStores}; | ||
}export{EAsyncActionInjectType,EAsyncEndTags,EPostActionContext,InjectAsyncAction,InjectStoreState,InjectStoreStateOpt,PullstateContext,PullstateProvider,Store,createAsyncAction,createAsyncActionDirect,createPullstateCore,errorResult,registerInDevtools,successResult,update,useInstance,useLocalStore,useStoreState,useStoreStateOpt,useStores}; |
@@ -84,2 +84,14 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var isEqual=_interopDefault(require('fast-deep-equal/es6')),React=require('react'),React__default=_interopDefault(React),produce=require('immer'),produce__default=_interopDefault(produce);const onServer = typeof window === "undefined"; | ||
return subState; | ||
}function useLocalStore(initialState, deps) { | ||
const storeRef = React.useRef(); | ||
if (storeRef.current == null) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
if (deps !== undefined) { | ||
const prevDeps = React.useRef(deps); | ||
if (!isEqual(deps, prevDeps)) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
} | ||
return storeRef.current; | ||
}produce.enablePatches(); | ||
@@ -265,2 +277,8 @@ function makeSubscriptionFunction(store, watch, listener) { | ||
} | ||
useLocalCopyInitial(deps) { | ||
return useLocalStore(() => this.initialState, deps); | ||
} | ||
useLocalCopySnapshot(deps) { | ||
return useLocalStore(this.currentState, deps); | ||
} | ||
act(action) { | ||
@@ -992,3 +1010,3 @@ action((u, p) => this.batch(u, p)); | ||
if (isSuccess && !dormant) { | ||
onSuccess(); | ||
onSuccess(result.payload); | ||
} | ||
@@ -1229,2 +1247,2 @@ }, [isSuccess]); | ||
} | ||
}exports.InjectAsyncAction=InjectAsyncAction;exports.InjectStoreState=InjectStoreState;exports.InjectStoreStateOpt=InjectStoreStateOpt;exports.PullstateContext=PullstateContext;exports.PullstateProvider=PullstateProvider;exports.Store=Store;exports.createAsyncAction=createAsyncAction;exports.createAsyncActionDirect=createAsyncActionDirect;exports.createPullstateCore=createPullstateCore;exports.errorResult=errorResult;exports.registerInDevtools=registerInDevtools;exports.successResult=successResult;exports.update=update;exports.useInstance=useInstance;exports.useStoreState=useStoreState;exports.useStoreStateOpt=useStoreStateOpt;exports.useStores=useStores; | ||
}exports.InjectAsyncAction=InjectAsyncAction;exports.InjectStoreState=InjectStoreState;exports.InjectStoreStateOpt=InjectStoreStateOpt;exports.PullstateContext=PullstateContext;exports.PullstateProvider=PullstateProvider;exports.Store=Store;exports.createAsyncAction=createAsyncAction;exports.createAsyncActionDirect=createAsyncActionDirect;exports.createPullstateCore=createPullstateCore;exports.errorResult=errorResult;exports.registerInDevtools=registerInDevtools;exports.successResult=successResult;exports.update=update;exports.useInstance=useInstance;exports.useLocalStore=useLocalStore;exports.useStoreState=useStoreState;exports.useStoreStateOpt=useStoreStateOpt;exports.useStores=useStores; |
@@ -162,2 +162,16 @@ (function (global, factory) { | ||
function useLocalStore(initialState, deps) { | ||
const storeRef = React.useRef(); | ||
if (storeRef.current == null) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
if (deps !== undefined) { | ||
const prevDeps = React.useRef(deps); | ||
if (!es6(deps, prevDeps)) { | ||
storeRef.current = new Store(typeof initialState === "function" ? initialState() : initialState); | ||
} | ||
} | ||
return storeRef.current; | ||
} | ||
produce.enablePatches(); | ||
@@ -343,2 +357,8 @@ function makeSubscriptionFunction(store, watch, listener) { | ||
} | ||
useLocalCopyInitial(deps) { | ||
return useLocalStore(() => this.initialState, deps); | ||
} | ||
useLocalCopySnapshot(deps) { | ||
return useLocalStore(this.currentState, deps); | ||
} | ||
act(action) { | ||
@@ -1076,3 +1096,3 @@ action((u, p) => this.batch(u, p)); | ||
if (isSuccess && !dormant) { | ||
onSuccess(); | ||
onSuccess(result.payload); | ||
} | ||
@@ -1337,2 +1357,3 @@ }, [isSuccess]); | ||
exports.useInstance = useInstance; | ||
exports.useLocalStore = useLocalStore; | ||
exports.useStoreState = useStoreState; | ||
@@ -1339,0 +1360,0 @@ exports.useStoreStateOpt = useStoreStateOpt; |
@@ -49,2 +49,4 @@ import { Draft, Patch, PatchListener } from "immer"; | ||
useState<SS = any>(getSubState: (state: S) => SS, deps?: ReadonlyArray<any>): SS; | ||
useLocalCopyInitial(deps?: ReadonlyArray<any>): Store<S>; | ||
useLocalCopySnapshot(deps?: ReadonlyArray<any>): Store<S>; | ||
act(action: TStoreAction<S>): void; | ||
@@ -51,0 +53,0 @@ batch(updater: TUpdateFunction<S> | TUpdateFunction<S>[], patchesCallback?: (patches: Patch[], inversePatches: Patch[]) => void): void; |
{ | ||
"name": "pullstate", | ||
"version": "1.16.2", | ||
"version": "1.17.0", | ||
"description": "Simple state stores using immer and React hooks", | ||
@@ -9,2 +9,3 @@ "main": "dist/index.js", | ||
"main:umd": "dist/pullstate.umd.js", | ||
"main:umd:min": "dist/pullstate.umd.min.js", | ||
"types": "dist/index.d.ts", | ||
@@ -66,2 +67,3 @@ "files": [ | ||
"rollup-plugin-typescript2": "^0.27.1", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"rollup": "^1.31.1", | ||
@@ -74,3 +76,5 @@ "terser": "^3.16.1", | ||
"webpack": "^4.36.1", | ||
"webpack-cli": "^3.3.6" | ||
"webpack-cli": "^3.3.6", | ||
"react": "^16.13.1", | ||
"immer": "^7.0.1" | ||
}, | ||
@@ -77,0 +81,0 @@ "peerDependencies": { |
@@ -60,11 +60,10 @@ <p align="center"> | ||
Then, in React, we can start using the state of that store using a simple hook `useStoreState()`: | ||
Then, in React, we can start using the state of that store using a simple hook `useState()`: | ||
```tsx | ||
import * as React from "react"; | ||
import { useStoreState } from "pullstate"; | ||
import { UIStore } from "./UIStore"; | ||
export const App = () => { | ||
const isDarkMode = useStoreState(UIStore, s => s.isDarkMode); | ||
const isDarkMode = UIStore.useState(s => s.isDarkMode); | ||
@@ -83,3 +82,3 @@ return ( | ||
The second argument to `useStoreState()` over here (`s => s.isDarkMode`), is a selection function that ensures we select only the state that we actually need for this component. This is a big performance booster, as we only listen for changes (and if changed, re-render the component) on the exact returned values - in this case, simply the value of `isDarkMode`. | ||
The argument to `useState()` over here (`s => s.isDarkMode`), is a selection function that ensures we select only the state that we actually need for this component. This is a big performance booster, as we only listen for changes (and if changed, re-render the component) on the exact returned values - in this case, simply the value of `isDarkMode`. | ||
@@ -86,0 +85,0 @@ --- |
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
230368
21
4332
33
2
137