useReducer基本用法

一、引入api

import React ,{useReducer}from 'react';
           

二、基本使用

设置数值count,默认初始值为0，

传入不同分发方式，‘add’,‘sub’,

根据action不同，返回不同数值。

function UseReducerDemo() {
        const [count, dispatch]=useReducer((state,action)=>{
            switch (action) {
                case 'add':
                    return state+1;
                case 'sub':
                    return state-1;
                default:
                    return state;
            }
        },0)

    return<div>
        <h2>现在的分数值是:{count}分</h2>
        <button style={{marginRight:10}} onClick={()=>{dispatch('add')}}>加分</button>
        <button onClick={()=>{dispatch('sub')}}>减分</button>
    </div>

}
export default UseReducerDemo
           

三、效果图

例子完结。

四、其他相关用法

第二个参数接收值，也接受{}对象，eg:

const initialState = {count: 0};
const [state, dispatch] = useReducer(reducer, initialState);
           

也可以这样用

function init(initialCount) {
  return {count: initialCount};
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({initialCount}) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({type: 'reset', payload: initialCount})}>
        Reset
      </button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );