ReactHooks useReducer

计数器的增加功能

import React, { useReducer } from 'react';

function ReducerDemo(){
    const [count , dispatch] = useReducer((state,action)=>{
        switch(action){
             case 'add':
                return state+1
             case 'sub':
                return state-1
             default:
                return state
     }
    },0)//0为初始化的state
    return (
        <div>
            <h2>现在的分数是{count}</h2>
            <button onClick={()=>{dispatch('add')}}>Increment</button>
            <button onClick={()=>{dispatch('sub')}}>Decrement</button>
        </div>
    )
}
export default ReducerDemo

useReducer第一个参数为一个reducer函数，即为作用state的函数，第二个函数为初始化的state。

第一个参数为reducer函数，dispatch将值传入进reducer。