React redux-thunk 处于待定状态并且永远不会解析

Question

这不是一个复杂的应用程序，我只是想更好地理解 Promise 及其工作原理，所以我用 React 和 Redux 制作了这个简单的应用程序，它只有一个按钮，当我按下按钮时，我想向 redux 发送一个动作店铺。 我想模拟一个非常慢的 api，所以在我的 asyncthunk 中我创建了一个 promise 并在 settimeout 内。 当我按下按钮时，我想看到我的 promise 待处理 2 秒，在此之后我想完成我的 promise，我正在使用 Redux Chrome 扩展程序检查它，但我的 promise 永远处于待处理状态。

应用程序.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { useDispatch } from 'react-redux';
import './App.css';

const cargar = createAsyncThunk(
  "cargar/data",
  async () => {
    let respuesta;
    await new Promise((resolve) => {
      setTimeout(() => respuesta = resolve, 2000);
    });
    return respuesta;
  }
)

const cargaSlice = createSlice({
  name: "cargar",
  initialState: {
    isLoading: false,
    loaded: false,
    hasError: false
  },
  extraReducers: (builder) => {
    builder.addCase(cargar.pending, (state, action) => {
      state.isLoading = true;
      state.loaded = false;
      state.hasError = false;
    })
      .addCase(cargar.fulfilled, (state, action) => {
        state.isLoading = false;
        state.loaded = action.payload;
        state.hasError = false;
      })
      .addCase(cargar.rejected, (state, action) => {
        state.isLoading = false;
        state.loaded = false;
        state.hasError = true;
      })
  }
})

export default cargaSlice.reducer;

export function App() {
  const dispatch = useDispatch();
  const handleCarga = () => {
    dispatch(cargar());
  }
  return (
      <div className="App">
        <h1>Presiona el botón para cargar</h1>
        <button onClick={handleCarga}>Cargar</button>
      </div>
  );
}

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { App } from './App';
import reportWebVitals from './reportWebVitals';
import reducer from './App';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';

const store = configureStore({
  reducer: reducer
})

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>

);

Answer 1

永远不会调用您的resolve方案 function，试试这个：

const cargar = createAsyncThunk(
    "cargar/data",
    () => new Promise((resolve) => setTimeout(resolve, 2000))
);

Answer 2

好的，我确实解决了它，但我仍然不确定我是否完全理解承诺，所以如果有人可以评论我的结论是对还是错，我将不胜感激。 所以事情是这样的，我的 promise 中的 resolve 是一个回调（或者至少我是这么认为的），所以 resolve 是我的 settimeout 的第一个参数，没有其他东西，那么我的 Promise 真的不会构建为返回任何东西和 settimeout也不返回任何东西，所以返回我的 Promise 总是会导致不需要的未定义。 这是工作代码，我希望它对某人有用：

const cargar = createAsyncThunk(
  "cargar/data",
  async () => {
    let respuesta = undefined; // this value can be anything really
    await new Promise((resolve) => {
      setTimeout(resolve, 2000);
      respuesta = true;
    });
    return respuesta;
  }
)