Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

createStoreHook helper function for @xstate/store/react#5298

Unanswered
matthewdavi asked this question inIdeas
Discussion options

Hello,

I've found the DX of zustand creating a bound hook automatically for each store to be very ergonomic and pleasant. I also quite like @xstate/store and its type inference + structure around events.

But I've been confused as to why I need to pass in the store as the first argument touseSelector. This seems like a downgrade from the DX zustand offers. I've written this function for use in my app, and I'm wondering if this is an antipattern, or whether it's a good enough idea that it could be exposed as a helper function from the@xstate/store/react package.

// createSelectorHook.tsimporttype{Store}from'@xstate/store';import{useSelector}from'@xstate/store/react';/* --------------------------------------------------------- * *  helpers * --------------------------------------------------------- *//** Pull the context type out of any `Store` instance */typeContextOf<TextendsStore<any,any,any>>=TextendsStore<  inferCtx,any,any>  ?Ctx  :never;/** EqualityFn signature used by `useSelector` (first arg can be `undefined`) */typeEqualityFn<T>=(a:T|undefined,b:T)=>boolean;/* --------------------------------------------------------- * *  factory * --------------------------------------------------------- *//** * Create a React hook that’s permanently bound to the given store. * *@example *   export const store = createStore({ … }); *   export const useStore = createSelectorHook(store); * *   const count = useStore(c => c.count);          // number *   const name  = useStore(c => c.name);           // string */exportfunctioncreateSelectorHook<TStoreextendsStore<any,any,any>>(store:TStore){typeCtx=ContextOf<TStore>;returnfunctionuseStoreSelector<Selected>(selector:(ctx:Ctx)=>Selected,equalityFn?:EqualityFn<Selected>):Selected{returnuseSelector(store,(state)=>selector(state.contextasCtx),equalityFn// matches the exact signature expected by useSelector  [oai_citation:0‡github.com](https://github.com/statelyai/xstate/discussions/4998?utm_source=chatgpt.com));};}
You must be logged in to vote

Replies: 1 comment

Comment options

Inspired by this, I added a proposedcreateStoreHook(…) helper function:#5354

constuseCountStore=createStoreHook({context:{count:0},on:{inc:(ctx,event:{by:number})=>({      ...ctx,count:ctx.count+event.by})}});// UsagefunctionComponent(){const[count,store]=useCountStore((s)=>s.context.count);store.trigger.inc({by:3});// Usage (no selector)const[snapshot,store]=useCountStore();}
You must be logged in to vote
0 replies
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Ideas
Labels
None yet
2 participants
@matthewdavi@davidkpiano

[8]ページ先頭

©2009-2025 Movatter.jp