从 useDispatch 钩子返回的调度函数是否与异步 thunk 同步？

【问题标题】：Is dispatch function returned from useDispatch hook synchronous with async thunk?从 useDispatch 钩子返回的调度函数是否与异步 thunk 同步？
【发布时间】：2023-03-15 01:44:01
【问题描述】：

异步重击：

const getMovies = createAsyncThunk('recommended/getMovies', async () =>{
    const result = await api.getRecommendedMovies();
    console.log('first')
    return result;
});

使用 useDispatch 钩子中的调度函数的函数：

const getMovies = (page) => {console.log(moviesData)
    const moviesData = dispatch(recommendedMoviesActions.getMovies());
    console.log('second');
};

控制台日志如下：

'第二'
'第一'

为什么会出现这样的结果？不应该是 1. 'first, 2. 'second' 因为调度是同步的吗？

【问题讨论】：

标签： reactjs redux-thunk redux-toolkit

【解决方案1】：

createAsyncThunk 返回一个标准的 Redux thunk action creator。你从 thunk(async/await) 返回了一个承诺，dispatch(recommendedMoviesActions.getMovies()) 返回了一个承诺，所以你应该在做额外的工作之前等待承诺解决。见Unwrapping Result Actions

import { configureStore, createAsyncThunk } from '@reduxjs/toolkit';

const api = {
  getRecommendedMovies: () => Promise.resolve(),
};

const getMovies = createAsyncThunk('recommended/getMovies', async () => {
  const result = await api.getRecommendedMovies();
  console.log('first');
  return result;
});

const store = configureStore({ reducer() {} });
// second, first
// store.dispatch(getMovies());
// console.log('second');

// first, second
store.dispatch(getMovies()).then(() => {
  console.log('second');
});

【讨论】：