在 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 都是完全有效且等效的。