feat: simple action (#18)

src/react/react.ts

@@ -27,15 +27,15 @@ export function createUseTrackSliceHook<TAllSliceName extends string = any>(
             const selectedData = sl.track(effectStore);
             ref.current = selectedData;
 
+            onStoreChange();
+
             queueMicrotask(() => {
               if (effectStore._runInstance?._addTrackedCount === 0) {
                 console.warn(
                   `You forgot to destructure/access the tracked field from ${sl.name}. This will not track any changes!.`,
                 );
               }
             });
-
-            onStoreChange();
           });
 
           return () => {

src/vanilla/__tests__/store-state.test.ts

@@ -2,6 +2,7 @@ import { Transaction } from '../transaction';
 import { sliceKey, slice } from '../slice';
 import { StoreState } from '../store-state';
 import { testCleanup } from '../helpers/test-cleanup';
+import { expectType } from '../types';
 
 const sliceOne = slice([], {
   name: 'sliceOne',
@@ -427,3 +428,51 @@ describe('_getChangedSlices', () => {
     expect(initialStoreState._getChangedSlices(storeState)).toHaveLength(2);
   });
 });
+
+describe('simple action', () => {
+  test('works', () => {
+    const sliceTwo = slice([], {
+      name: 'sliceTwo',
+      state: { keyTwo: 'valueTwo' },
+    });
+
+    const sliceOne = slice([sliceTwo], {
+      name: 'sliceOne',
+      state: {
+        keyOne: 'valueOne',
+        keyTwo: false,
+      },
+    });
+
+    const action1 = sliceOne.simpleAction('keyOne', (payload, state) => {
+      expectType<string, typeof payload>(payload);
+
+      expectType<StoreState<'sliceOne' | 'sliceTwo'>, typeof state>(state);
+
+      return {
+        keyOne: payload + 'abc',
+      };
+    });
+
+    const action2: (val: boolean) => Transaction<'sliceOne'> =
+      sliceOne.simpleAction('keyTwo');
+
+    let store = StoreState.create({
+      slices: [sliceTwo, sliceOne],
+    });
+
+    store = store.applyTransaction(action1('xyz'));
+
+    expect(store.resolve(sliceOne.sliceId)).toEqual({
+      keyOne: 'xyzabc',
+      keyTwo: false,
+    });
+
+    store = store.applyTransaction(action2(true));
+
+    expect(store.resolve(sliceOne.sliceId)).toEqual({
+      keyOne: 'xyzabc',
+      keyTwo: true,
+    });
+  });
+});

src/vanilla/action.ts

@@ -14,6 +14,7 @@ export type UserActionCallback<
 export type ActionOpts<TSliceName extends string, TParams extends any[]> = {
   slice: Slice<TSliceName, any, any>;
   userCallback: UserActionCallback<TParams, ActionBuilder<any, any>>;
+  debugName?: string | undefined;
 };
 
 // we save actions in a global registry, so we can call them again
@@ -23,7 +24,7 @@ export const actionRegistry = new Map<ActionId, Action<any, any>>();
 export class Action<TSliceName extends string, TParams extends any[]> {
   actionId: ActionId;
   constructor(public readonly opts: ActionOpts<TSliceName, TParams>) {
-    const hint = opts.userCallback.name;
+    const hint = opts.debugName || opts.userCallback.name;
     this.actionId = idGeneration.createActionId(opts.slice.sliceId, hint);
 
     if (actionRegistry.has(this.actionId)) {

src/vanilla/slice/slice.ts

@@ -39,12 +39,42 @@ export class Slice<
     super(opts);
   }
 
+  simpleAction<TKey extends keyof TState>(
+    key: TKey,
+    updater?: (
+      val: TState[TKey],
+      state: StoreState<TSliceName | TDep>,
+    ) => Partial<TState>,
+  ) {
+    return this.action(
+      (val: TState[TKey]) => {
+        return this.tx((state) => {
+          return this.update(state, (existing) => {
+            if (!updater) {
+              return {
+                ...existing,
+                [key]: val,
+              };
+            }
+
+            return updater(val, state);
+          });
+        });
+      },
+      {
+        name: `simpleAction(${key.toString()})`,
+      },
+    );
+  }
+
   action<TParams extends any[]>(
     cb: UserActionCallback<TParams, ActionBuilder<any, any>>,
+    opts?: { name?: string },
   ): (...params: TParams) => Transaction<TSliceName> {
     const action = new Action<TSliceName, TParams>({
       slice: this,
       userCallback: cb,
+      debugName: opts?.name,
     });
 
     return action.getTransactionBuilder();