Question

我使用 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 进行输入更改。

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

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

Answer 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

Redux：使用输入 onChange 更改状态

1 个答案: