如何处理让用户知道我正在等待 Redux 中数据库的响应？

Question

我想将数据发送到服务器并等待响应。要做到这一点，我希望我的Redux操作方法首先激发即时对象操作，使我的UI显示它在等待，然后在服务器响应后显示thunk操作。我可以用单动法吗？一般来说，对于这种情况，最佳做法是什么？

Answer 1

我通常处理此问题的方法是在您的状态中设置状态，如下所示：

const initialState = {
isPendingDBResponse: false,
errorFromDB: "",
data: [...] // any data sent back from the DB if it's needed
}

然后，无论你有什么组件，都只需要使用类似三元运算符的东西来处理不同的状态：

import React from "react";
const MyComponent = ({ isPendingDBResponse, errorFromDB, data }) => (
<div>
{(isPendingDBResponse)
? <p>Waiting on DB...</p>
: (errorFromDB)
? <p>{errorFromDB}</p>
: <p>Everything was sent successfully</p> // Display any data here if needed
}
</div>
)
const mapStateToProps ({ reducerName }) => {
const { isPendingDBResponse, errorFromDB, data } = reducerName;
return {
isPendingDBResponse,
errorFromDB,
data
}
}
export default connect(mapStateToProps)(MyComponent);