1

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

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

我使用反冲状态来实现：

// 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 输入 changs 时，我无法找到在运行时执行此操作的方法。

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

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

4

1 回答 1

0

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

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

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

于 2021-04-06T19:42:57.607 回答