question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[TypeScript] v3.6.3 multiple middlewares breaks type check on stores with objects

See original GitHub issue

As per the test example here: https://github.com/pmndrs/zustand/blob/9f47fdc9276c96db99b70ee763e3990b2ec533a7/tests/middlewareTypes.test.tsx#L440-L476

If one of the items stored is an object, type checking reports an error. (Sorry this must be the 5th question/issue about TS being a pain!)

Minimal example:

type ObjectState = {
  count: 0,
  obj: {
    prop: string;
  };
  inc: () => void;
};

const useStore = create<
  ObjectState,
  SetState<ObjectState>,
  GetState<ObjectState>,
  StoreApiWithSubscribeWithSelector<ObjectState> & StoreApiWithPersist<ObjectState>
>(
  subscribeWithSelector(
    persist(
      (set, get) => ({
        count: 0,
        inc: () => set({ count: get().count + 1 }, false),
      }),
      { name: "count" }
    )
  ),
  { name: "prefix" }
);

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
dai-shicommented, Nov 3, 2021

I added a link to the test file in readme. Let me change the order in the test file for now.

2reactions
dai-shicommented, Nov 3, 2021

Another option is to add type annotation on persist.

    const useStore = create(                                                   
      subscribeWithSelector(                                                   
        persist<                                                               
          MyState,                                                             
          SetState<MyState>,  
          GetState<MyState>,  
          StoreApiWithSubscribeWithSelector<MyState> &  
            StoreApiWithPersist<MyState>  
        >(                  
          () => ({                                                             
            foo: true,    
          }),               
          { name: 'name' }              
        )                                                                       
      )                                                                         
    )  
Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular FormControl objects are able to accept input values of ...
So [value] accepts only primitive types, but [ngValue] can accept objects of any class. I hope this can be helpful.
Read more >
Firebase JavaScript SDK Release Notes - Google
Fixed a bug where @firebase/app-check-types was not included as a dependency ... Fixed a bug that prevented usage of FieldPath objects with multiple...
Read more >
Migrating to React Router v6: A complete guide
Migrate your React Router applications from v5 to v6 with this in-depth guide, including a review of additions and improvements from v5.
Read more >
Node.js best practices list (July 2021) - DEV Community ‍ ‍
3. Code Style Practices · 3.1 Use ESLint · 3.2 Node. · 3.3 Start a Codeblock's Curly Braces on the Same Line ·...
Read more >
Changelog - Cypress Documentation
Testing multiple origins in a single test with the new cy.origin() command. ... Fixes #24652; Fixed TypeScript types for testIsolation .
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found