React组件useReducer的讲解与使用

const [state, dispatch] = useReducer(reducer, initialArg, init?)

import React,{ useState } from 'react'
const App = () => {
  const [num,setNum] = useState(0)
  const addHandler = () =>{ 
    setNum(prenum => prenum + 1)
  }
  const subHandler = () =>{ 
    setNum(prenum => prenum -1)
  }
  return (
    <div style={{fontSize:'30px',padding:'50px'}}>
      <button onClick={addHandler}>加1</button>
      {num}
      <button onClick={subHandler}>减1</button>
    </div>
  )
}
export default App

import React,{ useReducer } from 'react'
const App = () => {
  // reducer函数 state:当前最新状态值、action:当前执行的操作
  const reducer = (state,action) =>{ 
    switch(action.type){
      case 'ADD':
        return state + 1
      case 'SUB':
        return state - 1
      default:
        return state
    }
  }
  const [num,numDispatch] = useReducer(reducer,0)
  const addHandler = () =>{ 
    numDispatch({type:'ADD'})
  }
  const subHandler = () =>{ 
    numDispatch({type:'SUB'})
  }
  return ( 
    <div style={{fontSize:'30px',padding:'50px'}}>
      <button onClick={addHandler}>加1</button>
      {num}
      <button onClick={subHandler}>减1</button>
    </div>
  )
}
export default App

import { useReducer } from 'react';
 
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
    default:
      return null
  }
}
 
const initialState = { name: 'Taylor', age: 42 };
 
export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
 
  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }
 
  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value
    }); 
  }
 
  return (
    <>
      <input
        value={state.name}
        onChange={handleInputChange}
      />
      <button onClick={handleButtonClick}>
        +1
      </button>
      <p>Hello, {state.name}. You are {state.age} years old</p>
    </>
  );
}