Usereducer basic usage

One 、 introduce api

import React ,{useReducer}from 'react';

Two 、 Basic use

Set the value count, The default initial value is 0,
Pass in different distribution methods ,‘add’,‘sub’,
according to action Different , Return different values .

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> Now the score is :{count} branch </h2>
        <button style={
   {marginRight:10}} onClick={()=>{dispatch('add')}}> Bonus points </button>
        <button onClick={()=>{dispatch('sub')}}> points </button>
    </div>

}
export default UseReducerDemo

3、 ... and 、 design sketch

End of example .

Four 、 Other related usage

The second parameter receives the value , Also accept {} object ,eg:

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

It can also be used in this way

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>
    </>
  );