使用useReducer模拟useState

tsx
import { useReducer, useState } from 'react'
 
type State = {
  count: number
  name?: string
  timestamp?: number
}
type Payload<T> = ((state: T) => T) | T | Partial<T>
 
const countReducer = (state: State, payload: Payload<typeof state>) => {
  if (typeof payload === 'function') {
    const result = payload(state)
    return { ...state, ...result }
  } else {
    return { ...state, ...payload }
  }
}
 
export default function StateReducer() {
  const [countState, setCount] = useReducer(countReducer, {
    count: 0,
    timestamp: Date.now(),
  })
 
  const add = (step: number) => {
    setCount(preState => ({ count: preState.count + step }))
    setCount(preState => ({ count: preState.count + step }))
    setCount(preState => ({ count: preState.count + step }))
  }
  const add2 = (step: number) => {
    setCount(preState => ({
      count: preState.count + step,
      timestamp: Date.now(),
    }))
  }
  const sub = (step: number) => {
    setCount(preState => ({ count: preState.count - step }))
    setCount(preState => ({ count: preState.count - step }))
    setCount(preState => ({ count: preState.count - step }))
  }
 
  const [step, setStep] = useState(1)
 
  return (
    <>
      <label htmlFor="step">步长</label>
      <input id="step" type="number" value={step} onChange={e => setStep(+e.target.value)} />
 
      <div>{JSON.stringify(countState)}</div>
 
      <button onClick={() => add(step)}>
        <span>只加count</span>
        <span>+</span>
      </button>
      <br />
      <button onClick={() => add2(step)}>
        <span>同时加count和时间戳</span>
        <span>+</span>
      </button>
      <br />
      <button onClick={() => sub(step)}>
        <span>只-count</span>
        <span>-</span>
      </button>
    </>
  )
}