redux thunk 和 promise 之间的区别

Question

我刚开始学习 Redux，我对其目的有疑问。据我所知，redux-thunk 会延迟一个动作的派发，所以在下面的代码中，它会等到服务器响应后再派发。但这不是承诺的工作。以我的基本知识，里面的回调 then 无论如何都应该在我们得到响应后才被调用，对吧？

export const fetchRentalById = (rentalId) => {
  return dispatch => {  
    axios.get(`/api/v1/rentals/${rentalId}`)
    .then((rental) => {
      dispatch({
      type: FETCH_BY_ID,
      payload: rental.data
    })
  })
 }
}

所以我尝试删除 return 中的调度，由于某些原因，它会在服务器响应之前调度，但对我来说似乎没有意义。感谢您的阅读。 调用组件

const {rental, fetchRentalById} = props;
  let rentalId = props.match.params.id;
  useEffect(() => {
    fetchRentalById(rentalId);
  }, [ rentalId, fetchRentalById]);
...
const mapState = state => {
  return {
    rental: state.data.rental
  };
};
export default connect(mapState, {fetchRentalById})(RentalDetail);

我使用mapDispatchToProps，所以这里不需要使用props.dispatch。

Answer 1

首先：
redux action 是一个纯 java 脚本 object 不是 function
你的情况

const action = {
   type: FETCH_BY_ID,
    payload: rental.data
}

只有这个动作。
只有这个是你允许传递给dispatch()

现在 dispatch 函数来自你的组件 因此，如果没有 redux-thunk，您将不得不进行更改

export const fetchRentalById = (rentalId) => {

到

export const fetchRentalById = (dispatch,rentalId) => {

并将组件的调度传递给这个函数

总之

redux-thunk 有什么帮助？
现在只需语法，您就可以在动作创建器上返回一个函数。

怎么样？ Redux tunk 拦截所有动作，如果它是一个函数，它会调用它。

但是 Promise 让你头疼不已。 你可以阅读更多here和here

如果你想要特定的 promise 中间件，你可以选择以下之一： 来自https://redux.js.org/advanced/async-actions/

Thunk 中间件并不是编排异步的唯一方法 Redux 中的操作：

你可以使用 redux-promise 或 redux-promise-middleware 来调度 承诺而不是功能。你可以使用 redux-observable 调度 Observables。你可以使用 redux-saga 中间件来构建 更复杂的异步操作。你可以使用 redux-pack 用于调度基于 promise 的异步操作的中间件。你可以 甚至编写自定义中间件来描述对 API 的调用，例如 现实世界的例子确实如此。您可以尝试几个选项，选择 一个你喜欢的约定，并遵循它，无论是否有 中间件。

我正在使用 redux-promise;

在 redux 承诺中，您的动作创建者将如下所示：

export const fetchRentalById = (rentalId) => {
  return {
    type: FETCH_BY_ID,
   // you can take the .data in other function on in reducer
    payload: axios.get(`/api/v1/rentals/${rentalId}`) 
  }
}

让代码更简洁