在 React / Redux 和 redux-thunk 中，如果在 fn 是 thunk 时调用 fn()(dispatch) 会发生什么？

Question

我是 React 项目代码库的新手，我看到了一个 function：

const fn = foo => dispatch => { 
  // do something
}

所以fn是一个 function ，它接受foo并返回一个 function ，它接受dispatch并做一些事情。

所以在fn内部，我想做一些较小的任务，并且会调用自己来完成它，所以我有：

// Code sample 01:

const fn = foo => dispatch => { 
  // do something

  if (someCondition) {
    fn(123)(dispatch);
  }
}

我的同事告诉我fn实际上是用作 redux-thunk 的一部分（所以我认为fn是一个 thunk），正确的方法是将其称为：

// Code sample 02:

const fn = foo => dispatch => { 
  // do something

  if (someCondition) {
    dispatch(fn(123));
  }
}

但是我想知道如果我使用上面的代码示例 01，它似乎可以运行，但是在代码运行完成后，处理器有 12 个内核中的一半以 80% 的容量运行。 有时甚至会导致 Google Chrome 的整个标签页变得无响应。 代码示例 01 导致这种情况的原因是什么/真正发生了什么？

Answer 1

redux 是同步的。 为了能够在调度之前执行一些异步操作，您可以使用一些库，例如redux-thunk 。

redux-thunk拦截你的动作创建者 function。 如果您的 function 返回另一个 function 而不是redux-thunk它将允许您执行一些异步操作，将调度作为参数传递，因此您可以在解决异步请求后调度。

另一方面，如果 function 没有返回另一个 function， redux-thunk会让 dispatch 立即同步调用 reducer。

使用redux-thunk的正确方法是在 promise 链或异步等待方式中的一些异步操作之后调用调度：

const myAsyncAction = foo => dispatch => { 
  // do something async like
  // promise chain example but you could use async await
  axios.get('myUrl')
    .then(res => dispatch({ action: 'loaded', payload: res}))
    .catch.(err => dispatch({action: 'fail', payload: err}))
  }
}

Answer 2

我认为fn是一个 thunk

这里的fn被更好地描述为“thunk 创建者” - thunk 实际上是 function 以dispatch作为参数 - 即fn返回的内容。

你在这里的例子真的很有趣 - 我从来没有见过一个 thunk 递归地调度自己，但由于 thunk 实际上只是一个 function 以dispatch作为参数，我认为 styles 都同样有效。

当你调度一个 thunk 时，注入到 thunk 中的dispatch参数来自redux-thunk中间件。 这个中间件的代码非常简单——这里根本没有魔法。

中间件注入到 thunk 的dispatch与您使用的dispatch相同，您可以通过 redux 在其他任何地方使用，它只是一个同步的 JS function 调用。 因此， fn(123)(dispatch)在字面上与dispatch(fn(123))相同。 当您以第二种方式执行此操作时，它实际上只会导致第一种方式被调用，但在中间件内部而不是直接调用。

因此，您给出的两个代码示例在功能上是等效的，并且它们应该具有完全相同的行为。 我不确定是什么导致了第一个示例的性能问题，但它一定是在// do something部分或其他地方的一些其他错误，这两者之间是不同的。 从“redux 角度”来看，方法 1 和方法 2 都是完全有效且等效的。