Merge pull request #113 from yf-yang/immer

Author: zbeyens

.changeset/fluffy-toes-juggle.md

@@ -0,0 +1,5 @@
+---
+'zustand-x': patch
+---
+
+Update readme and improve test cases related to immer style set

README.md

@@ -122,6 +122,8 @@ store.set('someAction', 10);
 store.set('state', (draft) => {
   draft.name = 'Bob';
   draft.loggedIn = true;
+  // With immer, draft still need to be returned to be compatible with general state update type signatures 
+  return draft;
 });
 ```
 
@@ -272,6 +274,9 @@ const storeWithActions = store.extendActions(
       set('state', (draft) => {
         draft.firstName = 'Jane';
         draft.lastName = 'Doe';
+
+        // With immer, draft still need to be returned to be compatible with general state update type signatures 
+        return draft;
       });
     },
     someActionToOverride: () => {

packages/zustand-x/README.md

@@ -122,6 +122,8 @@ store.set('someAction', 10);
 store.set('state', (draft) => {
   draft.name = 'Bob';
   draft.loggedIn = true;
+  // With immer, draft still need to be returned to be compatible with general state update type signatures 
+  return draft;
 });
 ```
 
@@ -272,6 +274,9 @@ const storeWithActions = store.extendActions(
       set('state', (draft) => {
         draft.firstName = 'Jane';
         draft.lastName = 'Doe';
+
+        // With immer, draft still need to be returned to be compatible with general state update type signatures 
+        return draft;
       });
     },
     someActionToOverride: () => {

packages/zustand-x/src/tests/createStore.spec.ts

@@ -266,20 +266,31 @@ describe('zustandX', () => {
   });
 
   describe('when extending actions', () => {
+    const initialTags: string[] = ['tag1', 'tag2'];
     const store = createStore(
       {
         name: 'zustandX',
         stars: 0,
         description: '',
+        tags: initialTags,
       },
       {
         name: 'repo',
+        immer: {
+          enabled: true,
+        },
       }
     )
       .extendActions(({ set }) => ({
         validName: (name: string) => {
           set('name', name.trim());
         },
+        replace2ndTag: (tag: string) => {
+          set('state', (draft) => {
+            draft.tags?.splice(1, 1, tag);
+            return draft;
+          });
+        },
       }))
       .extendActions(({ set }) => ({
         reset: (name: string) => {
@@ -300,12 +311,19 @@ describe('zustandX', () => {
       expect(store.get('name')).toBe('test');
     });
 
+    it('should execute action with immer', () => {
+      store.actions.replace2ndTag('tag3');
+      expect(store.get('tags')).toEqual(['tag1', 'tag3']);
+      expect(store.get('tags')).not.toBe(initialTags);
+    });
+
     it('should execute chained actions', () => {
       store.actions.reset('test ');
       expect(store.get('state')).toEqual({
         name: 'test',
         stars: 0,
         description: '',
+        tags: ['tag1', 'tag3'],
       });
     });
 
@@ -315,6 +333,7 @@ describe('zustandX', () => {
         name: 'test-repo',
         stars: 42,
         description: 'A test repository',
+        tags: ['tag1', 'tag3'],
       });
     });
 
@@ -616,13 +635,18 @@ describe('zustandX', () => {
   });
 
   describe('when set.state', () => {
+    const initialTags: string[] = ['tag1', 'tag2'];
     const store = createStore(
       {
         name: 'zustandX',
         stars: 0,
+        tags: initialTags,
       },
       {
         name: 'repo',
+        immer: {
+          enabled: true,
+        },
       }
     );
 
@@ -636,7 +660,15 @@ describe('zustandX', () => {
       expect(store.get('state')).toEqual({
         name: 'test',
         stars: 1,
+        tags: ['tag1', 'tag2'],
       });
+
+      store.set('state', (draft) => {
+        draft.tags?.splice(1, 1, 'tag3', 'tag4');
+        return draft;
+      });
+
+      expect(store.get('tags')).not.toBe(initialTags);
     });
 
     describe('when using immer', () => {