如何使用 useReducer 来确定使用哪个 useState 变量？答案

【问题标题】：How to use useReducer to determine which useState variable to use?如何使用 useReducer 来确定使用哪个 useState 变量？
【发布时间】：2021-05-19 02:02:26
【问题描述】：

这可能是一个基本问题，但是，

我有两个 useState 变量：

const [varOne, setVarOne] = useState(null);
const [varTwo, setVarTwo] = useState(null);

第三个变量告诉我需要使用哪些变量，varOne 或 varTwo：

const [whichVar, setWhichVar] = useState(0);

我还有第三个变量curVar，它是基于whichVar 的值的varOne 或varTwo：

const [curVar, setCurVar] = useState(null);
if (whichVar === 0) {
  curVar = varOne;
  setCurVar = setVarOne;
} else {
  curVar = varTwo;
  setCurVar = setVarTwo;
}

我意识到这可能是错误的，但在另一篇文章中我被告知我可以使用 useReducer 来实现这一点，使用 useReducer 实现这一点的最优雅的方法是什么？

【问题讨论】：

我真的不明白这个用例。您已经有两个值和另一个值来告诉您使用哪个值。为什么你需要一个重复原始 2 个值之一的 4th？只需使用原始状态值即可。
每次我想使用其中一个变量时，我都需要经历检查要使用哪个变量的整个过程，这很烦人，它变得非常混乱。如果我能在一个地方做一次就更好了
如果你能提供你如何使用它的例子，我可以根据你的用例来定制我的答案，例如，它是否都在同一个组件中？

标签： reactjs use-reducer

【解决方案1】：

一个简单的方法是使用一个自定义挂钩来存储所有状态/逻辑并返回当前活动的值。例如：

import React, { useState } from 'react';

const useSwitchValue = () => {
  const [varOne, setVarOne] = useState('A');
  const [varTwo, setVarTwo] = useState('B');
  const [whichVar, setWhichVar] = useState(0);

  if (whichVar === 0) return {
    value: varOne,
    setVarOne,
    setVarTwo,
    switchVars: () => setWhichVar(whichVar ? 0 : 1)
  };
  else return {
    value: varTwo,
    setVarOne,
    setVarTwo,
    switchVars: () => setWhichVar(whichVar ? 0 : 1)
  };
};

export default function App() {
  const { value, switchVars, setVarOne, setVarTwo } = useSwitchValue();

  return (
    <div>
      <button onClick={switchVars}>
        SWITCH VALUES
      </button>
      <div>{value}</div>
    </div>
  );
}

通过这个钩子，你可以改变状态值并在它们之间切换，但是当你想使用当前选择的值时，你只需引用{value}，而无需进行任何条件检查（因为这样做了一次，在里面自定义钩子）。

Sandbox

【讨论】：

【解决方案2】：

是的，useReducer 可以帮助实现类似的功能。 useReducer 将根据给定的 reducer 和初始状态发出您的当前状态和调度函数。然后，您可以使用此调度方法来调度您的 reducer 函数中指定的操作类型，以操纵您的状态。查看 React 文档中的第一个示例，它们非常有帮助 https://reactjs.org/docs/hooks-reference.html#usereducer

【讨论】：

谢谢，是的，我喜欢这个案例的具体示例。我从来没有真正使用过 useReducer 并且已经阅读了文档，但不知道如何在这种情况下应用它。它们都在同一个组件中。