Skip to content

Commit

Permalink
docs: remove State and improve replace typecasting
Browse files Browse the repository at this point in the history
  • Loading branch information
charkour committed Oct 6, 2024
1 parent 17bc89d commit bbd6361
Showing 1 changed file with 17 additions and 13 deletions.
30 changes: 17 additions & 13 deletions docs/guides/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,14 +234,17 @@ If you are eager to know what the answer is to this particular problem then you

### Handling Dynamic `replace` Flag

If the value of the `replace` flag is not known at compile time and is determined dynamically, you might face issues. To handle this, you can use a workaround by annotating the `replace` parameter with `as any`:
If the value of the `replace` flag is not known at compile time and is determined dynamically, you might face issues. To handle this, you can use a workaround by annotating the `replace` parameter with the parameters of the `setState` function:

```ts
const replaceFlag = Math.random() > 0.5
store.setState(partialOrFull, replaceFlag as any)
const args = [{ bears: 5 }, replaceFlag] as Parameters<
typeof useBearStore.setState
>
store.setState(...args)
```

#### Example with `as any` Workaround
#### Example with `as Parameters` Workaround

```ts
import { create } from 'zustand'
Expand All @@ -257,7 +260,10 @@ const useBearStore = create<BearState>()((set) => ({
}))

const replaceFlag = Math.random() > 0.5
useBearStore.setState({ bears: 5 }, replaceFlag as any) // Using the workaround
const args = [{ bears: 5 }, replaceFlag] as Parameters<
typeof useBearStore.setState
>
useBearStore.setState(...args) // Using the workaround
```

By following this approach, you can ensure that your code handles dynamic `replace` flags without encountering type issues.
Expand All @@ -267,31 +273,30 @@ By following this approach, you can ensure that your code handles dynamic `repla
### Middleware that doesn't change the store type

```ts
import { create, State, StateCreator, StoreMutatorIdentifier } from 'zustand'
import { create, StateCreator, StoreMutatorIdentifier } from 'zustand'

type Logger = <
T extends State,
T,
Mps extends [StoreMutatorIdentifier, unknown][] = [],
Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
f: StateCreator<T, Mps, Mcs>,
name?: string,
) => StateCreator<T, Mps, Mcs>

type LoggerImpl = <T extends State>(
type LoggerImpl = <T>(
f: StateCreator<T, [], []>,
name?: string,
) => StateCreator<T, [], []>

const loggerImpl: LoggerImpl = (f, name) => (set, get, store) => {
type T = ReturnType<typeof f>
const loggedSet: typeof set = (...a) => {
set(...a)
set(...(a as Parameters<typeof set>))
console.log(...(name ? [`${name}:`] : []), get())
}
const setState = store.setState
store.setState = (...a) => {
setState(...a)
setState(...(a as Parameters<typeof setState>))
console.log(...(name ? [`${name}:`] : []), store.getState())
}

Expand All @@ -318,15 +323,14 @@ const useBearStore = create<BearState>()(
```ts
import {
create,
State,
StateCreator,
StoreMutatorIdentifier,
Mutate,
StoreApi,
} from 'zustand'

type Foo = <
T extends State,
T,
A,
Mps extends [StoreMutatorIdentifier, unknown][] = [],
Mcs extends [StoreMutatorIdentifier, unknown][] = [],
Expand All @@ -341,7 +345,7 @@ declare module 'zustand' {
}
}

type FooImpl = <T extends State, A>(
type FooImpl = <T, A>(
f: StateCreator<T, [], []>,
bar: A,
) => StateCreator<T, [], []>
Expand Down

0 comments on commit bbd6361

Please sign in to comment.