javascript React redux-thunk处于挂起状态,从未解析

93ze6v8z  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(119)

这不是一个复杂的应用程序,我只是想更好地理解承诺和他们是如何工作的,所以我做了这个简单的应用程序与React和Redux,它只有一个按钮,当我按下按钮,我想调度一个动作到redux商店。我想模拟一个非常缓慢的API,所以在我的asynthunk中,我创建了一个promise,在settimeout中。当我按下按钮,我想看到我的承诺挂起2秒,在这段时间后,我想看到我的承诺履行,我检查这使用Redux Chrome扩展,但我的承诺是永远挂起。
app.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>
  );
}

index.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>

);
c9qzyr3d

c9qzyr3d1#

好吧,我确实解决了它,但我不确定我是否完全理解承诺,所以如果有人能评论我的结论是正确的还是错误的,那将是令人赞赏的。所以事情是这样的,我承诺中的决心是一个回调(至少我是这么认为的)所以resolve是settimeout的第一个参数,没有其他内容,那么我的Promise是真的不返回任何东西和settimeout不返回任何东西,所以返回我的Promise将总是导致一个不想要的undefined.以下是工作代码,我希望它将是有用的人:

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

vsaztqbk2#

您的resolve函数从未被调用,请尝试以下操作:

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

如果要返回一个可在异径管中使用的值(例如true),请执行以下操作:

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

相关问题