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

Question

异步 thunk:

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');
};

控制台日志如下：

'second'
'first'

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

Answer 1

createAsyncThunk return 是一个标准的 Redux thunk 动作创建者。你 return 来自 thunk(async/await) 的承诺，dispatch(recommendedMoviesActions.getMovies()) return 是一个承诺，所以你应该等待承诺解决后再做额外的工作。参见 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');
});

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

Is dispatch function returned from useDispatch hook synchronous with async thunk?

reactjs

redux-thunk

redux-toolkit