redux

redux 中间件让你能够像 redux 一样通过操作和 Reducer 更新存储。

¥redux middleware lets you update a store through actions and reducers just like redux.

const nextStateCreatorFn = redux(reducerFn, initialState)

• 类型

  ¥Types

  • 签名

    ¥Signature

  • 变量

    ¥Mutator

• 参考

  ¥Reference

• 用法

  ¥Usage

  • 通过操作和 Reducer 更新状态

    ¥Updating state through actions and reducers

• 故障排除

  ¥Troubleshooting

类型

¥Types

签名

¥Signature

redux<T, A>(reducerFn: (state: T, action: A) => T, initialState: T): StateCreator<T & { dispatch: (action: A) => A }, [['zustand/redux', A]], []>

变量

¥Mutator

['zustand/redux', A]

参考

¥Reference

redux(reducerFn, initialState)

参数

¥Parameters

• reducerFn：它应该是纯粹的，应该将应用的当前状态和操作对象作为参数，并返回应用操作产生的新状态。

  ¥reducerFn: It should be pure and should take the current state of your application and an action object as arguments, and returns the new state resulting from applying the action.

• initialState：你希望状态最初为的值。它可以是任何类型的值，除了函数。

  ¥initialState: The value you want the state to be initially. It can be a value of any type, except a function.

返回

¥Returns

redux 返回状态创建器函数。

¥redux returns a state creator function.

用法

¥Usage

通过操作和 Reducer 更新状态

¥Updating state through actions and reducers

import { createStore } from 'zustand/vanilla'
import { redux } from 'zustand/middleware'

type PersonStoreState = {
  firstName: string
  lastName: string
  email: string
}

type PersonStoreAction =
  | { type: 'person/setFirstName'; firstName: string }
  | { type: 'person/setLastName'; lastName: string }
  | { type: 'person/setEmail'; email: string }

type PersonStore = PersonStoreState & PersonStoreActions

const personStoreReducer = (
  state: PersonStoreState,
  action: PersonStoreAction,
) => {
  switch (action.type) {
    case 'person/setFirstName': {
      return { ...state, firstName: action.firstName }
    }
    case 'person/setLastName': {
      return { ...state, lastName: action.lastName }
    }
    case 'person/setEmail': {
      return { ...state, email: action.email }
    }
    default: {
      return state
    }
  }
}

const personStoreInitialState: PersonStoreState = {
  firstName: 'Barbara',
  lastName: 'Hepworth',
  email: 'bhepworth@sculpture.com',
}

const personStore = createStore<PersonStore>()(
  redux(personStoreReducer, personStoreInitialState),
)

const $firstNameInput = document.getElementById(
  'first-name',
) as HTMLInputElement
const $lastNameInput = document.getElementById('last-name') as HTMLInputElement
const $emailInput = document.getElementById('email') as HTMLInputElement
const $result = document.getElementById('result') as HTMLDivElement

function handleFirstNameChange(event: Event) {
  personStore.dispatch({
    type: 'person/setFirstName',
    firstName: (event.target as any).value,
  })
}

function handleLastNameChange(event: Event) {
  personStore.dispatch({
    type: 'person/setLastName',
    lastName: (event.target as any).value,
  })
}

function handleEmailChange(event: Event) {
  personStore.dispatch({
    type: 'person/setEmail',
    email: (event.target as any).value,
  })
}

$firstNameInput.addEventListener('input', handleFirstNameChange)
$lastNameInput.addEventListener('input', handleLastNameChange)
$emailInput.addEventListener('input', handleEmailChange)

const render: Parameters<typeof personStore.subscribe>[0] = (person) => {
  $firstNameInput.value = person.firstName
  $lastNameInput.value = person.lastName
  $emailInput.value = person.email

  $result.innerHTML = `${person.firstName} ${person.lastName} (${person.email})`
}

render(personStore.getInitialState(), personStore.getInitialState())

personStore.subscribe(render)

这是 html 代码

¥Here's the html code

<label style="display: block">
  First name:
  <input id="first-name" />
</label>
<label style="display: block">
  Last name:
  <input id="last-name" />
</label>
<label style="display: block">
  Email:
  <input id="email" />
</label>
<p id="result"></p>

故障排除

¥Troubleshooting

TBD