Redux：使用输入 onChange 更改状态答案

【问题标题】：Redux: Change state with input onChangeRedux：使用输入 onChange 更改状态
【发布时间】：2021-07-02 14:52:41
【问题描述】：

我正在使用 RECOIL JS 进行状态管理。由于recoil对api调用没有很好的支持，所以需要切换回redux + thunk。

我需要更新表单的状态（全局）在用户输入时。

我使用 recoil state 来实现：

// recoil
const [s3Data, setS3Data] = useRecoilState<S3>(s3State);

const S3StateHandler = (data: string, type: TYPES) => {
    if (type === TYPES.REGION) {
      setS3Data((oldState) => ({
        ...oldState,
        [type]: data,
      }));
    } else {
      setS3Data((oldState) => ({
        ...oldState,
        params: {
          ...oldState.params,
          [type]: data.toString(),
        },
      }));
    }
  };

  return (
    <div>
      <TextField
        select
        value={s3Data.region}
        onChange={(e) => S3StateHandler(e.target.value, TYPES.REGION)}
        helperText="Please select your region">
        {RegionsList.map((region) => (
          <option value={region} key={region} className={classes.selectItem}>
            {region}
          </option>
        ))}
      </TextField>
      <TextField
        value={s3Data.params.Bucket}
        onChange={(e) => S3StateHandler(e.target.value, TYPES.BUCKET_NAME)}
      />
    </div>
  );

我需要使用 redux 做同样的事情，我无法找到一种方法来做到这一点在运行时使用 redux 进行输入更改。

有没有办法做到这一点？因为我能想到的唯一解决方案是在每次击键（onChange 事件）时调度一个动作，这不是最佳的。

另一个问题是，我们可以同时使用两者吗？我的意思是，recoil 用于全局状态，redux 用于 api 调用？

【问题讨论】：

API 调用是在何时何地进行的？我假设您发出GET 请求以加载s3State 变量？您何时POST 输入表单？另外，使表单状态全局化是什么意思？其他组件是否需要访问它？一般情况下最好用useState将表单状态存储在组件中，并且只有在按下“提交”时才将数据放入Redux或其他全局状态。
可能有 n 个子组件，它们都可能有 n 个字段。提交按钮由父组件处理，它位于组件树的上方。所以我在点击提交按钮时需要所有子组件的值。
您为什么要为此使用任何全局状态管理？ API 调用由 onChange 或 onKeyUp 事件触发，因此只需在此处触发即可。无需涉及任何状态管理。对于表单元素，您可以使用react-hook-form，它会处理您需要的所有内容。表单值不应处于全局状态。

标签： javascript reactjs redux redux-thunk recoiljs

【解决方案1】：

您可以使用的一种解决方案是去抖动，如以下链接所述：https://dev.to/anuradha9712/debouncing-v-s-throttling-lb2

您可以创建另一个使用 debounce 的函数来包装您的 redux 操作。在链接的文章中对其进行了很好的描述，但不使用 redux。但是，它也应该同样适用于调度 redux 操作。如果你已经在使用像 lodash 这样的库，你也可以找到 debounce 函数。

这是另一个链接：https://codeburst.io/throttling-and-debouncing-in-javascript-646d076d0a44

【讨论】：