如何使用useReducer React鉤子

自從React引入以來鉤子，我與他們一起完成了多個項目，它們很棒。

刪除所有基於類的組件會使代碼感覺更“真實”的JavaScript。功能組件最終可以管理狀態。

看看我的React鉤子介紹首先，如果您是他們的新手。

我有時使用的一個鉤子是useReducer。

import React, { useReducer } from 'react'

該鉤子用於管理狀態。有點像useState，但比較複雜。

這是兩者之間的關鍵區別useState和useReducer： 和useReducer，通過傳遞消息來改變狀態而不是調用updater函數。

如果你知道如何Redux原理，基本上是一樣的。精簡器是一個純函數，可以根據前一個狀態和已分派的動作來計算下一個狀態。

(currentState, action) => newState

“純功能”是什麼意思？純函數接受輸入並返回輸出，而不更改輸入或其他任何內容。這意味著減速器將返回一個全新的狀態，該狀態將替換先前的狀態。

減速器應：

• 永不改變其論點
• 永遠不會產生副作用（沒有API調用會改變任何東西）
• 永遠不要調用非純函數，這些函數會根據輸入以外的因素來改變其輸出（例如，Date.now()或者Math.random()）

沒有強化，但是您應該遵守規則。這有一個很好的好處：還原劑更容易測試，因為它們沒有副作用。

這允許集中狀態管理，允許組件通過發送消息對其進行修改，還允許您在組件中使用（和更改）更複雜的狀態。

讓我們用一個計數器組件做一個例子。

useReducer接受reducer函數和初始狀態值作為參數。在這種情況下，我們的狀態是一個整數，從0開始：

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, 0)
}

減速器是一種函數，如上所述，它接受當前狀態和一個動作，該值可以是您想要的任何類型的值。在這種情況下，它是一個字符串：

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

我們還使組件輸出一些JSX使這個簡單的應用程序正常工作：

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0)
  return (
    <>
      Counter: {count}
      <button onClick={() => dispatch('INCREMENT')}>+</button>
      <button onClick={() => dispatch('DECREMENT')}>-</button>
    </>
  )
}

這是有關Codepen的完整示例：

看筆React useReducer鉤子由Flavio Copes（@flaviocopes） 在密碼筆。