这不是一个复杂的应用程序,我只是想更好地理解承诺和他们是如何工作的,所以我做了这个简单的应用程序与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>
);
2条答案
按热度按时间c9qzyr3d1#
好吧,我确实解决了它,但我不确定我是否完全理解承诺,所以如果有人能评论我的结论是正确的还是错误的,那将是令人赞赏的。所以事情是这样的,我承诺中的决心是一个回调(至少我是这么认为的)所以resolve是settimeout的第一个参数,没有其他内容,那么我的Promise是真的不返回任何东西和settimeout不返回任何东西,所以返回我的Promise将总是导致一个不想要的undefined.以下是工作代码,我希望它将是有用的人:
vsaztqbk2#
您的
resolve
函数从未被调用,请尝试以下操作:如果要返回一个可在异径管中使用的值(例如
true
),请执行以下操作: