React-useReducer使用

1.useReducer

　　類似redux的reducer

　　使用：

　　useReducer(fn,initState)

　　接受兩個參數，第一個執行函數，有兩個參數，state和action

　　initState為初始數據

　　useReducer返回一個數組，包含state,dispath

　　action為判斷事件類型，通過dispatch傳遞

import React, { useReducer } from 'react';

const App = () => {
    const [state, dispath] = useReducer((state, action) => {
        console.log(state);
        switch (action.type) {
            case 'increment':
                return state + 1;
            case 'decrement':
                return state - 1;
            default:
                return state;
        }
    }, 0);

    return (
        <div className='App'>
            <button onClick={() => dispath({ type: 'increment' })}>increment</button>
            <button onClick={() => dispath({ type: 'decrement' })}>decrement</button>
            <p>{state}</p>
        </div>
    );
};

export default App;