如何使用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!