在 Redux 的 reducer 中，我可以在全局（模块）范围内设置变量吗？

Question

这是使用 ReactJS、Redux 和 Redux-thunk。

reducer/get-data.js里面，我可以设置一个

let dataFetchingStartTimestamp;

在全球范围内？我想在全局范围内设置它的原因是函数getData() 以块的形式获取数据，所以第一次，假设它获取前 300 条记录（假设 300 条记录可能需要 10 秒），并且第二次，另外 300 条记录，依此类推，直到达到 6000 条记录。 getData() 将在 AJAX 成功后调用自己。 （promise 的 then 处理程序）。

当用户更改 UI Dropbox 时，现有的 getData() 循环应该停止并使用新值重新启动，并且之前发生的 AJAX 不应该将数据置于 Redux 状态。所以这就是为什么当我们有dataFetchingStartTimestamp时，我们可以设置它，当它是第一次获取数据时，将dataFetchingStartTimestamp设置为Date.now()，然后如果用户更改UI，那么它将是另一个“第一次获取数据”，因此会更改dataFetchingStartTimestamp。所以在这个函数内部或者reducer里面，如果它看到dataFetchingStartTimestamp和之前的值不一样，那么它什么也不做。这意味着，只会执行具有最新dataFetchingStartTimestamp 的操作。

我想传递这个值的方式是当getData()在初始AJAX之后调用自己，将dataFetchingStartTimestamp传递给自己，就像dataFetchingContinuationTimestamp一样，所以这个循环会有一个dataFetchingContinuationTimestamp的值到与全球 dataFetchingStartTimestamp 比较。

reducer 是如何得到这个值的：它会在第一次时，getData() 为 redux 状态调度一个GET_DATA_START 和dataFetchingStartTimestamp 的有效负载。所以在reducer中，case后面的语句可以检查当前全局dataFetchingStartTimestamp是否和Redux状态下的一样。如果它们不同，则根本不要更改状态。

这可以做到吗，或者真的有更好的方法来处理它？我们也可以使用

const dataFetchingStartTimestamp = { value: null };

如果我们只允许设置一个常量，但value 将作为全局值。

另一种方法是使dataFetchingStartTimestamp 成为getData（函数对象）的属性。

也许 dataFetchingStartTimestamp 这里所谓的 global 并不是真正的全局，而是 webpack 打包的作用域的局部变量，或者作为模块内的局部变量？

Answer 1

我希望我能正确理解这个问题，用户输入会导致异步操作调度，所以如果用户输入搜索输入字符a，然后输入b，那么将触发 2 个搜索：a 和 @987654324 @。如果他们以与用户提供输入不同的顺序解析怎么办？ ab 搜索在 1 秒后解析并设置状态。 a 搜索会在 1 秒后解析并覆盖 ab 的结果。您的 UI 现在不同步，在搜索文本中显示 ab，但搜索结果显示为 a（请参阅下面的隐藏示例）

const later = (value) =>
  new Promise((resolve) =>
    setTimeout(
      () => resolve(value),
      value.length === 1 ? 2000 : 1000
    )
  );
const asyncFunction = (setter, value) => {
  console.log('starting async with value:', value);
  later(value).then((value) => {
    console.log('resolved with value:', value);
    setter(value);
  });
};
const App = () => {
  const [result, setResult] = React.useState('');
  const onChange = ({ target: { value } }) => {
    asyncFunction(setResult, value);
  };
  return (
    <div>
      <input type="text" onChange={onChange} />
      <h4>Result:{result}</h4>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

以下是解决此问题的方法：

const later = (value) =>
  new Promise((resolve) =>
    setTimeout(
      () => resolve(value),
      value.length === 1 ? 2000 : 1000
    )
  );
const REPLACED = { message: 'REPLACED' };
const resolveLast = (fn) => {
  const check = {};
  return (...args) => {
    const current = {};
    check.current = current;
    //You could make check.current Data.now() but
    //  object reference is guaranteed to be unique
    return Promise.resolve(fn(...args)).then((resolve) =>
      check.current === current
        ? resolve
        : Promise.reject(REPLACED)
    );
  };
};
const lastLater = resolveLast(later);

const asyncFunction = (setter, value) => {
  console.log('starting async with value:', value);
  lastLater(value)
    .then((value) => {
      console.log('resolved with value:', value);
      setter(value);
    })
    .catch((err) =>
      err === REPLACED
        ? console.log(
            `request for ${value} replaced with newer request`
          )
        : Promise.reject(err)
    );
};
const App = () => {
  const [result, setResult] = React.useState('');
  const onChange = ({ target: { value } }) => {
    asyncFunction(setResult, value);
  };
  return (
    <div>
      <input type="text" onChange={onChange} />
      <h4>Result:{result}</h4>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>