如何使用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） 在密码笔。