archive-gh-me/zustand
1
0
Fork 0
mirror of https://github.com/pmndrs/zustand.git synced 2025-12-08 19:45:52 +00:00
Code Issues Projects Releases Wiki Activity

chore(docs): update docs content (#2831)

Browse Source 
* chore(docs): update docs content

* chore(docs): update types

* chore: update import types
This commit is contained in:
Danilo Britto 2024-11-04 19:27:34 -05:00 committed by GitHub
parent dcc4c098ab
commit bf4bcf20c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1472 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
docs/guides/how-to-reset-state.md
View File

@ -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>()
@ -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

50
docs/guides/testing.md
View File

@ -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(() => {
@ -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(() => {
@ -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(() => {
@ -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(() => {
@ -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(() => {
@ -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(() => {

1433
docs/guides/tutorial-tic-tac-toe.md Normal file
View File

File diff suppressed because it is too large Load Diff