React reducer 必须是纯函数吗？

Question

我写了一个 UI 元素作为函数组件，它使用 React 的userReducer钩子，它似乎运行没有错误。

useReducer引用了我写的一个函数（想象中称为reducer）：

  const [state, dispatch] = React.useReducer(reducer, inputData,
    (inputData) => initialState(inputData));

有state数据由reducer函数输入和输出；并且有依赖于的“托管”UI 元素state，例如......

  return (
    <div>
      <div>
        {state.elements.map(getElement)}
      </div>
      <ShowHints hints={state.hints} inputValue={state.inputValue} />
    </div>
  );

...这是正常的。

我担心的是该reducer函数不纯。

• 它的行为只取决于它的输入参数——所以用相同的输入参数调用它两次具有相同的结果。
• 然而它会产生副作用，它不仅返回新状态

副作用是有一个<input>元素的状态由以下之一控制：

const inputRef = React.createRef<HTMLInputElement>();

该<input>控制只是半管理，是这样的：

<input type="text" ref={inputRef} onKeyDown={handleKeyDown} onChange={handleChange}

在onKeyDown和onChange事件是行动派的减速（这是好的），但减速传递的HTMLInputElement实例（即inputRef.current值）作为输入参数，并且该减速套房产HTMLInputElement变异的状态-这是不是<input>幸福一个完全托管的组件，其内容由 reducer 的输出状态定义。

为什么原因<input>元素没有被全面管理的是，我需要控制的选择范围（即start和end的范围内）<input>，并不仅是它的文本值。

问题：

• 以这种方式使减速器功能不纯是否可以（例如，尽管有问题或显着，但没有错误）？
  • 它只依赖于它的输入参数，因此是可重复的
  • 但它会改变某些东西（即inputRef.current属性）并返回新state值
• 减速器是否有另一种方法来控制元素的start和end属性<input type="text">，例如一种定义<input>元素的方法，使其start和end值state由减速器返回的他控制？

（我认为@Fyodor 在下面的回答回答了第二个问题，我仍然不确定第一个问题）。

---

什么决定了要在 HTML 元素上设置的值？是传入的使用信息还是包含逻辑？

组件的设计和源代码在这里显示，而且很长。

这是一个复杂的“组件”，它使用几个元素实现——几个<div>s、几个<span>s、一些可点击的<svg>s 和<input>元素。

给出了减速器，作为它的输入参数：

• 之前的“状态”
• 当前<input>实例（从中可以读取 的当前状态<input>）
• 由事件处理程序创建的“动作”

几个事件处理程序或动作中的两个是 的onKeyDown和onChange事件，<input>因此<input>当有一个事件改变了<input>.

Answer 1

从技术上讲，减速器可能会产生不同的副作用。我认为这不是一个好的实践，至少是因为关注点分离不好（预计减速器只会根据操作产生新的状态，而不是改变其他东西）。（很抱歉提出我自己的观点，因为看起来，使用了副作用useReducer，就像这里一样）。同样在 Redux 中，所有副作用都移至动作创建者中。

对于您的具体问题，我可能建议将inputRef突变移至单独的useEffect钩子，这又取决于如下状态

useEffect (() => {
    inputRef.currect // do work with inputRef
}, [state]); // make dependent from state

这是制作依赖表格的示例useEffectstate

您还可以移动useEffect到自定义挂钩以使代码可重用，如下所示（未经测试，用作提示）

function mutateRef (inputRef: React.RefObject<HTMLInputElement>, state: /* type of state */) {
    useEffect (() => {
        inputRef.currect // do work with inputRef
    }, [state, inputRef]);
}