React之useReducer

useRecucer与useState一样，都是React hooks中引入用于状态管理的，更具体点，useState是利用useReducer来实现的。

       使用useReducer很简单，只需要 ：

      1)  引入 useReducer: import {useReducer} from 'react'

      2）定义initState状态与reducer函数；其中reducer函数包含currentState与action两               个参数，并根据action，返回新的状态；

      3）使用 useReducer(reducer, initState, init)，返回当前状态currentState和一个执行相应action的dispatch;

       按照以上步骤，使用useReducer实现一个计数器，主要有increament, decrement, reset功能。

// src/components/Counter.js
import React, {useReducer} from 'react';

const initState = 0;
const reducer = (state, action) => {
    switch(action) {
        case 'increment': 
            return state + 1;
        case 'decrement': 
            return state - 1;        
        case 'reset': 
            return initState ;        
        default: 
            return state;
    }
}

const Counter = () => {
   const [currentState, dispatch] = useReducer(reducer, initState)
   return (
    <>
        <h2>Count - {currentState}</h2>        
        <button onClick={() => dispatch('increment)}>Increment</button>
        <button onClick={() => dispatch('decrement)}>Decrement</button>       
        <button onClick={() => dispatch('reset)}>Reset</button>
    </>
   )
}

export default Counter;

// src/index.js
import {render} eact-dom';
import Counter from './components/Counter'

render(<Counter />, document.getElementById('root'))

此外，initState与action还可以为object，这样可以管理多个state,以及赋予action额外的属性，比如每次递增递减多少

// src/components/Counter.js
import React, {useReducer} from 'react';

const initState = {
    firstCount: 0,
    secondCount: 10,
};
const reducer = (state, action) => {
    switch(action.type) {
       case 'increment':           return {...state, firstCount: state.firstCount + action.value}; // 需要合并       case 'decrement':           return {...state, firstCount: state.firstCount - action.value };       case 'increment2':           return {...state, secondCount: state.secondCount + action.value };       case 'decrement2':           return {...state, secondCount: state.secondCount - action.value };       case 'reset': 
           return initState ;  
       default: 
           return state;
    }
}

const Counter = () => {
   const [currentState, dispatch] = useReducer(reducer, initState)
   return (
        <>
            <div>            <h2>FirstCount - {currentState.firstCount}</h2>                   <button onClick={() => dispatch({type:'increment', value: 3})}>Increment 1</button>            <button onClick={() => dispatch({type:'decrement', value: 2})}>Decrement 1</button>                    <h2>SecondCount - {currentState.secondCount}</h2>              <button onClick={() => dispatch({type:'increment2', value: 10})}>Increment 2</button>            <button onClick={() => dispatch({type:'decrement2', value: 5})}>Decrement 2</button>                    <button onClick={() => dispatch({type:'reset'})}>Reset</button>        </div>
        </>
    )
}
export default Counter;
// src/index.js
import {render} eact-dom';
import Counter from './components/Counter'

render(<Counter />, document.getElementById('root'));