Day 15 - 用 useReducer 取代 useState !?

如果有错误，欢迎留言指教~ Q_Q

上篇提到，如何取得更新後的 state

useReducer 和 useState 都是拿来管理 state 的 hook

一样都可以做到储存和变更 state 的功能，如下:

使用 useState

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  
  const handleIncrease = () => {
    setCount((prev) => prev + 1);
  };

  const handleDecrease = () => {
    setCount((prev) => prev - 1);
  };
  
  return (
    <div className="App">
      <button onClick={handleIncrease}>+</button>
      <h1>{count}</h1>
      <button onClick={handleDecrease}>-</button>
    </div>
  );
}

codeSandBox

使用 useReducer

import { useReducer } from "react";

const ACTIONS = {
  INCREMENT: "Increament",
  DECREMENT: "Decreament"
};

const reducer = (state, action) => {
  switch (action.type) {
    case ACTIONS.INCREMENT:
      return { count: state.count + 1 };
    case ACTIONS.DECREMENT:
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

const initialState = { count: 0 };

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const handleIncreament = () => {
    dispatch({ type: ACTIONS.INCREMENT });
  };

  const handleDecreament = () => {
    dispatch({ type: ACTIONS.DECREMENT });
  };

  return (
    <div className="App">
      <button onClick={handleIncreament}>+</button>
      <h1>{state.count}</h1>
      <button onClick={handleDecreament}>-</button>
    </div>
  );
}

codeSandBox

useReducer 是进阶版的 useState

但当 state 的逻辑和值复杂起来时，或是 state 依赖另一个 state 时

这时候 useReducer 会比 useState 更适合使用

更新 state 不依赖 useEffect，传递 dispatch 并不会在重新 render 时改变。

useReducer 和 Redux 之间的关系?

啊 他们看起来很像馁？ 下篇再续~ XD

ref

3. https://zh-hant.reactjs.org/docs/hooks-reference.html#usereducer
4. https://zh-hant.reactjs.org/docs/hooks-faq.html