docs: created the new TypeScript Beginner Guide#3246
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
d79728c to
7e140a3
Compare
docs/guides/beginner-typescript.md
Outdated
| } | ||
|
|
||
| // Create store with explicit generic <BearState> | ||
| export const useBearStore = create<BearState>((set) => ({ |
There was a problem hiding this comment.
Shouldn't TypeScript guide (for beginner or not) show create<T>()(...) usage?
There was a problem hiding this comment.
Good catch, that’s a valid point. Added this part
There was a problem hiding this comment.
We should always tell create<T>()(...) for beginners. create<T>(...) works for some cases, but it's for advanced users.
There was a problem hiding this comment.
@dai-shi I switched to create()(...). Also updated examples to make them more consistent. Could you please take a look?
docs/guides/beginner-typescript.md
Outdated
| // Fix the type with create<BearState>() | ||
| const createBearStore = create<BearState>() | ||
|
|
||
| // Initialize the store separately | ||
| export const useBearStore = createBearStore((set) => ({ |
There was a problem hiding this comment.
We don't recommend separating this. The extra parens () only exists because of TS limitation.
Please stick with create<T>()(...) pattern throughout the guide.
| // Fix the type with create<BearState>() | |
| const createBearStore = create<BearState>() | |
| // Initialize the store separately | |
| export const useBearStore = createBearStore((set) => ({ | |
| export const useBearStore = create<BearState>()((set) => ({ |
dai-shi
left a comment
There was a problem hiding this comment.
Sorry for the delay. Thanks for your patience.
docs/guides/beginner-typescript.md
Outdated
| type BearState = ExtractState<typeof useBearStore> | ||
| // or | ||
| type BearSnapshot = ReturnType<typeof useBearStore.getState> |
There was a problem hiding this comment.
Should we only show the first method? Isn't it enough for beginners?
There was a problem hiding this comment.
I agree, let's make it more straightforward
docs/guides/beginner-typescript.md
Outdated
| const bearStoreCreator = devtools(bearCreator) | ||
|
|
||
| export const useBearStore = create<BearState>()(bearStoreCreator) |
There was a problem hiding this comment.
I don't prefer this separation either. Let's suggest create<T>()(devtools(...)) pattern in the guide for all middleware.
There was a problem hiding this comment.
@dai-shi Sure!
I unified the view of the middleware usage with create<T>()(devtools(...)) pattern and without redundant store creators. Please review.
bf81429 to
77d4d6f
Compare
724d694 to
f958f2b
Compare
|
@dbritto-dev @dai-shi |
|
@yuraBezh thanks, I'd to improve the troubleshooting section in those docs but I need gather some cases from discussions first hehe |
@dbritto-dev @dai-shi BTW, I see some failing checks - not sure if they’re related to the PR changes or not. All tests passed locally. |
|
I'm waiting for @dbritto-dev review. Not sure about CI either. Maybe if we retrigger it, it may pass. |
Maybe it doesn't. Not sure how it happens. We need to figure it out. |
|
@dai-shi could it be |
Seems like it's due to the node version. In CI, the |
docs/guides/beginner-typescript.md
Outdated
| // In components, you can use both stores safely | ||
| function MultipleSelectors() { | ||
| const { bears, food } = useBearStore( | ||
| useShallow((state) => ({ bears: state.bears, food: state.food })) |
There was a problem hiding this comment.
By the way, we could also do this.
const [bears, food] = useBearStore(useShallow((s) => [s.bears, s.food]));I guess people like objects over arrays.
Summary
Created the new TypeScript Beginner Guide. This is the result of the previous PR discussions
Check List
pnpm run fixfor formatting and linting code and docs