如何使用useReducer React鉤子

找出useReducer React鉤子有什麼用,以及如何使用它!

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

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

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

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

import React, { useReducer } from 'react'

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

這是兩者之間的關鍵區別useStateuseReducer: 和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) 在密碼筆

Tech Wiki Online!