React的useReducer 的用法

React 的useReducer 的用法
const [state, dispatch] = useReducer(reducer, init);

当我们的 useEffect 里面涉及到两个变量的时候，我们就可以 使用useReducer, 可以看一下 下面的例子:

import React, { useReducer, useEffect } from "react";
import ReactDOM from "react-dom";

function Counter() {
		
	  const [state, dispatch] = useReducer(reducer, initialState);
	  const { count, step } = state;

	  useEffect(() => {
	    const id = setInterval(() => {
	      dispatch({ type: 'tick' });
	    }, 1000);
	    return () => clearInterval(id);
	  }, [dispatch]);

  return (
    <>
      <h1>{count}</h1>
      <input value={step} onChange={e => {
        dispatch({
          type: 'step',
          step: Number(e.target.value)
        });
      }} />
    </>
  );
}

const initialState = {
  count: 0,
  step: 1,
};

function reducer(state, action) {
  const { count, step } = state;
  if (action.type === 'tick') {
    return { count: count + step, step };
  } else if (action.type === 'step') {
    return { count, step: action.step };
  } else {
    throw new Error();
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);

React的其他hooks用法: 链接 大佬写的非常的好,推荐可以看一下