Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): update docs content #2831

Merged
merged 4 commits into from
Nov 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 5 additions & 69 deletions docs/guides/how-to-reset-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ const useSlice = create<State & Actions>()((set, get) => ({
Resetting multiple stores at once

```ts
import { create as _create } from 'zustand'
import type { StateCreator } from 'zustand'
import { create: actualCreate } from 'zustand'

const storeResetFns = new Set<() => void>()

Expand All @@ -55,80 +55,16 @@ const resetAllStores = () => {
})
}

export const create = (<T extends unknown>() => {
export const create = (<T>() => {
return (stateCreator: StateCreator<T>) => {
const store = _create(stateCreator)
const initialState = store.getState()
const store = actualCreate(stateCreator)
const initialState = store.getInitialState()
storeResetFns.add(() => {
store.setState(initialState, true)
})
return store
}
}) as typeof _create
```

Resetting bound store using Slices pattern

```ts
import create from 'zustand'
import type { StateCreator } from 'zustand'

const sliceResetFns = new Set<() => void>()

export const resetAllSlices = () => {
sliceResetFns.forEach((resetFn) => {
resetFn()
})
}

const initialBearState = { bears: 0 }

interface BearSlice {
bears: number
addBear: () => void
eatFish: () => void
}

const createBearSlice: StateCreator<
BearSlice & FishSlice,
[],
[],
BearSlice
> = (set) => {
sliceResetFns.add(() => set(initialBearState))
return {
...initialBearState,
addBear: () => set((state) => ({ bears: state.bears + 1 })),
eatFish: () => set((state) => ({ fishes: state.fishes - 1 })),
}
}

const initialStateFish = { fishes: 0 }

interface FishSlice {
fishes: number
addFish: () => void
}

const createFishSlice: StateCreator<
BearSlice & FishSlice,
[],
[],
FishSlice
> = (set) => {
sliceResetFns.add(() => set(initialStateFish))
return {
...initialStateFish,
addFish: () => set((state) => ({ fishes: state.fishes + 1 })),
}
}

const useBoundStore = create<BearSlice & FishSlice>()((...a) => ({
...createBearSlice(...a),
...createFishSlice(...a),
}))

export default useBoundStore
}) as typeof actualCreate
```

## CodeSandbox Demo
Expand Down
50 changes: 34 additions & 16 deletions docs/guides/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,16 +83,19 @@ In the next steps we are going to setup our Jest environment in order to mock Zu

```ts
// __mocks__/zustand.ts
import * as zustand from 'zustand'
import { act } from '@testing-library/react'
import type * as ZustandExportedTypes from 'zustand'
export * from 'zustand'

const { create: actualCreate, createStore: actualCreateStore } =
jest.requireActual<typeof zustand>('zustand')
jest.requireActual<typeof ZustandExportedTypes>('zustand')

// a variable to hold reset functions for all stores declared in the app
export const storeResetFns = new Set<() => void>()

const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
const createUncurried = <T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
const store = actualCreate(stateCreator)
const initialState = store.getInitialState()
storeResetFns.add(() => {
Expand All @@ -102,16 +105,20 @@ const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
}

// when creating a store, we get its initial state, create a reset function and add it in the set
export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
export const create = (<T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
console.log('zustand create mock')

// to support curried version of create
return typeof stateCreator === 'function'
? createUncurried(stateCreator)
: createUncurried
}) as typeof zustand.create
}) as typeof ZustandExportedTypes.create

const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
const createStoreUncurried = <T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
const store = actualCreateStore(stateCreator)
const initialState = store.getInitialState()
storeResetFns.add(() => {
Expand All @@ -121,14 +128,16 @@ const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
}

// when creating a store, we get its initial state, create a reset function and add it in the set
export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
export const createStore = (<T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
console.log('zustand createStore mock')

// to support curried version of createStore
return typeof stateCreator === 'function'
? createStoreUncurried(stateCreator)
: createStoreUncurried
}) as typeof zustand.createStore
}) as typeof ZustandExportedTypes.createStore

// reset all stores after each test run
afterEach(() => {
Expand Down Expand Up @@ -172,16 +181,19 @@ In the next steps we are going to setup our Vitest environment in order to mock

```ts
// __mocks__/zustand.ts
import * as zustand from 'zustand'
import { act } from '@testing-library/react'
import type * as ZustandExportedTypes from 'zustand'
export * from 'zustand'

const { create: actualCreate, createStore: actualCreateStore } =
await vi.importActual<typeof zustand>('zustand')
await vi.importActual<typeof ZustandExportedTypes>('zustand')

// a variable to hold reset functions for all stores declared in the app
export const storeResetFns = new Set<() => void>()

const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
const createUncurried = <T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
const store = actualCreate(stateCreator)
const initialState = store.getInitialState()
storeResetFns.add(() => {
Expand All @@ -191,16 +203,20 @@ const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
}

// when creating a store, we get its initial state, create a reset function and add it in the set
export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
export const create = (<T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
console.log('zustand create mock')

// to support curried version of create
return typeof stateCreator === 'function'
? createUncurried(stateCreator)
: createUncurried
}) as typeof zustand.create
}) as typeof ZustandExportedTypes.create

const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
const createStoreUncurried = <T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
const store = actualCreateStore(stateCreator)
const initialState = store.getInitialState()
storeResetFns.add(() => {
Expand All @@ -210,14 +226,16 @@ const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
}

// when creating a store, we get its initial state, create a reset function and add it in the set
export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
export const createStore = (<T>(
stateCreator: ZustandExportedTypes.StateCreator<T>,
) => {
console.log('zustand createStore mock')

// to support curried version of createStore
return typeof stateCreator === 'function'
? createStoreUncurried(stateCreator)
: createStoreUncurried
}) as typeof zustand.createStore
}) as typeof ZustandExportedTypes.createStore

// reset all stores after each test run
afterEach(() => {
Expand Down
Loading