Added in redux devtools integration

Changelog.md

@@ -1,3 +1,7 @@
+## 1.15.0
+
+Added integration with Redux Devtools. Make use of `registerInDevtools(Stores)` to use it. Argument is an object of `{ [storeName: string]: Store }` - which will register your stores instanced according to the name provided.
+
 ### 1.13.2
 
 More fixes for run() when using `respectCache: true`. Prevents the cacheBreakHook from clearing the current async state, even if the action hasn't finished yet.
@@ -53,7 +57,7 @@ const userAction = LoadUserAction.use({ id: userId });
 
 return (
   <div>
-    {userAction.renderPayload(user => (
+    {userAction.renderPayload((user) => (
       <span>User Name: {user.name}</span>
     ))}
   </div>
@@ -263,7 +267,7 @@ const loadEntity = PullstateCore.createAsyncAction<{ id: string }>(
     const resp = await endpoints.getEntity({ id });
 
     if (resp.positive) {
-      EntityStore.update(s => {
+      EntityStore.update((s) => {
         s.viewingEntity = resp.payload;
       });
       return successResult();
@@ -294,7 +298,7 @@ It has the same form as the regular Async Action function, injecting the argumen
 
 ```typescript jsx
 UIStore.createReaction(
-  s => s.valueToListenForChanges,
+  (s) => s.valueToListenForChanges,
   (draft, original, watched) => {
     // do something here when s.valueToListenForChanges changes
     // alter draft as usual - like regular update()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pullstate",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "Simple state stores using immer and React hooks",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/Store.ts

@@ -33,16 +33,16 @@ type TReactionCreator<S> = (store: Store<S>) => TRunReactionFunction;
 function makeSubscriptionFunction<S, T>(
   store: Store<S>,
   watch: (state: S) => T,
-  listener: (watched: T, allState: S, previousWatched: T) => void
+  listener: (watched: T, allState: S, previousWatched: T, uid?: string) => void
 ): TRunSubscriptionFunction {
   let lastWatchState: T = watch(store.getRawState());
 
-  return () => {
+  return (uid?: string) => {
     const currentState = store.getRawState();
     const nextWatchState = watch(currentState);
 
     if (!isEqual(nextWatchState, lastWatchState)) {
-      listener(nextWatchState, currentState, lastWatchState);
+      listener(nextWatchState, currentState, lastWatchState, uid);
       lastWatchState = nextWatchState;
     }
   };
@@ -57,6 +57,9 @@ function makeReactionFunctionCreator<S, T>(
 
     return (forceRun: boolean = false) => {
       const currentState = store.getRawState();
+
+      console.log(currentState);
+
       const nextWatchState = watch(currentState);
 
       if (forceRun || !isEqual(nextWatchState, lastWatchState)) {
@@ -84,7 +87,9 @@ function makeReactionFunctionCreator<S, T>(
             store._updateStateWithoutReaction(nextState);
           } else {
             store._updateStateWithoutReaction(
-              produce(currentState as any, (s: S) => reaction(nextWatchState, s, currentState, lastWatchState)) as any
+              produce(currentState as any, (s: S) =>
+                reaction(nextWatchState, s, currentState, lastWatchState)
+              ) as any
             );
           }
           lastWatchState = nextWatchState;
@@ -112,6 +117,10 @@ export type TStoreActionUpdate<S> = (
 
 export type TStoreAction<S> = (update: TStoreActionUpdate<S>) => void;
 
+/*export interface IStoreOptions {
+  name?: string;
+}*/
+
 // S = State
 export class Store<S = any> {
   private updateListeners: TPullstateUpdateListener[] = [];
@@ -139,6 +148,7 @@ export class Store<S = any> {
   constructor(initialState: S) {
     this.currentState = initialState;
     this.initialState = initialState;
+    // this._storeName = name;
   }
 
   _setInternalOptions({ ssr, reactionCreators = [] }: IStoreInternalOptions<S>) {

src/index.ts

@@ -16,6 +16,7 @@ import { createAsyncAction, createAsyncActionDirect, errorResult, successResult
 import { EAsyncActionInjectType, InjectAsyncAction, TInjectAsyncActionProps } from "./InjectAsyncAction";
 import { InjectStoreStateOpt } from "./InjectStoreStateOpt";
 import { TUseResponse } from "./async-types";
+import { registerInDevtools } from "./reduxDevtools";
 
 export * from "./async-types";
 
@@ -47,4 +48,5 @@ export {
   TMultiStoreAction,
   PullstateContext,
   TUseResponse,
+  registerInDevtools,
 };

src/reduxDevtools.ts

@@ -0,0 +1,34 @@
+import { IPullstateAllStores } from "./PullstateCore";
+
+export function registerInDevtools(stores: IPullstateAllStores) {
+  if (typeof document !== "undefined") {
+    for (const key of Object.keys(stores)) {
+      const store = stores[key];
+
+      const devToolsExtension = (window as any).__REDUX_DEVTOOLS_EXTENSION__;
+      if (devToolsExtension) {
+        const devTools = devToolsExtension.connect({ name: key });
+        devTools.init(store.getRawState());
+        let ignoreNext = true;
+        store.subscribe(
+          (state) => {
+            if (ignoreNext) {
+              ignoreNext = false;
+              return;
+            }
+            devTools.send("Change", state);
+          },
+          () => {}
+        );
+
+        devTools.subscribe((message: { type: string; state: any }) => {
+          if (message.type === "DISPATCH" && message.state) {
+            ignoreNext = true;
+            const parsed = JSON.parse(message.state);
+            store.replace(parsed);
+          }
+        });
+      }
+    }
+  }
+}