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

Update docs (#2756)

Browse Source
This commit is contained in:
Danilo Britto 2024-09-25 15:54:32 -05:00 committed by GitHub
parent 8b373dd382
commit 6b29015c3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 70 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/apis/create-with-equality-fn.md
View File

@ -81,7 +81,8 @@ const useAgeStore = createWithEqualityFn<AgeStore>()(
)
export default function App() {
const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
const age = useAgeStore((state) => stage.age)
const setAge = useAgeStore((state) => state.setAge)
function increment() {
setAge((currentAge) => currentAge + 1)

3
docs/apis/create.md
View File

@ -75,7 +75,8 @@ const useAgeStore = create<AgeStore>()((set) => ({
}))
export default function App() {
const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
const age = useAgeStore((state) => state.age)
const setAge = useAgeStore((state) => state.setAge)
function increment() {
setAge((currentAge) => currentAge + 1)

72
docs/hooks/use-store-with-equality-fn.md
View File

@ -52,19 +52,18 @@ store to manage `x` and `y` coordinates and provide an action to update these co
```tsx
import { createStore, useStore } from 'zustand'
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
```
@ -74,9 +73,14 @@ will use the store to track and update the dot's position.
```tsx
function MovingDot() {
const [position, setPosition] = useStoreWithEqualityFn(
const position = useStoreWithEqualityFn(
positionStore,
(state) => [{ x: state.x, y: state.y }, state.setPosition],
(state) => state.position,
shallow,
)
const setPosition = useStoreWithEqualityFn(
positionStore,
(state) => state.setPosition,
shallow,
)
@ -126,26 +130,30 @@ import { createStore } from 'zustand'
import { useStoreWithEqualityFn } from 'zustand/traditional'
import { shallow } from 'zustand/shallow'
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
function MovingDot() {
const [position, setPosition] = useStoreWithEqualityFn(
const position = useStoreWithEqualityFn(
positionStore,
(state) => [{ x: state.x, y: state.y }, state.setPosition],
(state) => state.position,
shallow,
)
const setPosition = useStoreWithEqualityFn(
positionStore,
(state) => state.setPosition,
shallow,
)
@ -423,20 +431,19 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.
```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
@ -483,9 +490,8 @@ within its container.
```tsx
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)
return (
<div
@ -547,20 +553,19 @@ import { createStore } from 'zustand'
import { useStoreWithEqualityFn } from 'zustand/traditional'
import { shallow } from 'zustand/shallow'
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
@ -592,9 +597,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
}
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)
return (
<div

66
docs/hooks/use-store.md
View File

@ -46,19 +46,18 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.
```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
```
@ -68,10 +67,8 @@ will use the store to track and update the dot's position.
```tsx
function MovingDot() {
const [position, setPosition] = useStore(positionStore, (state) => [
{ x: state.x, y: state.y },
state.setPosition,
])
const position = useStore(positionStore, (state) => state.position)
const setPosition = useStore(positionStore, (state) => state.setPositionStore)
return (
<div
@ -117,27 +114,24 @@ Here is what the code should look like:
```tsx
import { createStore, useStore } from 'zustand'
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
function MovingDot() {
const [position, setPosition] = useStore(positionStore, (state) => [
{ x: state.x, y: state.y },
state.setPosition,
])
const position = useStore(positionStore, (state) => state.position)
const setPosition = useStore(positionStore, (state) => state.setPositionStore)
return (
<div
@ -405,20 +399,19 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.
```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
@ -465,9 +458,8 @@ within its container.
```tsx
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)
return (
<div
@ -527,20 +519,19 @@ Here is what the code should look like:
import { type ReactNode, useState, createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }
type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}
type PositionStore = PositionStoreState & PositionStoreActions
const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
@ -572,9 +563,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
}
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)
return (
<div