Redux 按顺序重复调度操作
我正在为我的网站建立一个随机匹配功能。在startMatching Redux操作结束时，如果匹配成功，我想在分派matching_SUCCESS之前分派另一个名为startConversation的操作。startConversation操作用于创建或更新两个用户之间的聊天历史记录，并将发送firestore文档的id，该文档将聊天历史记录存储为最后的有效负载。由于（1）startConversation在匹配成功之前被调度，（2）startConversation调度聊天历史文档的id，我可以在我的Redux状态下创建一个名为chatid的字段，在匹配成功后访问文档的id，并使用它生成类似聊天窗口的内容 我一直在用一个案例测试代码，在这个案例中匹配应该成功完成。我遇到的问题是，第一次调度（startConversation）是在第二次调度（MATCHING_SUCCESS）完成后完成的。我知道这一点，因为我将console.log放在MatchingBox组件的componentDidUpdate方法中，并在startConversation操作结束时，前者中的console.log的执行时间早于后者，这意味着匹配_SUCCESS是在startConversation之前完成的，这会导致Redux状态发生变化，从而支持组件。实际上，MatchingBox组件状态中的buddy和loading字段已经更新，chatid仍然是一个空字符串。我不希望发生这种情况，因为正如您所看到的，我需要将chatid进一步传递给MatchingWindow组件 这让我感到困惑：毕竟，Redux不是同步的吗？另外，我尝试用“then”链接这两个调度，startConversation仍然在匹配_成功之后完成调度。我想知道如何解决这个问题。非常感谢你的耐心 重复操作Redux 按顺序重复调度操作,redux,react-redux,redux-thunk,react-redux-firebase,redux-firestore,Redux,React Redux,Redux Thunk,React Redux Firebase,Redux Firestore,我正在为我的网站建立一个随机匹配功能。在startMatching Redux操作结束时，如果匹配成功，我想在分派matching_SUCCESS之前分派另一个名为startConversation的操作。startConversation操作用于创建或更新两个用户之间的聊天历史记录，并将发送firestore文档的id，该文档将聊天历史记录存储为最后的有效负载。由于（1）startConversation在匹配成功之前被调度，（2）startConversation调度聊天历史文档的id，我可
export const startConversation = (user2id, user2profile, user1profile, message) => (dispatch, getState) => {
......
console.log(chatid);
dispatch({ type: CHAT_SUCCESS, payload: chatid });
}
export const startMatching = (userid, userprofile, usergender, genderpreference) => (dispatch) => {
dispatch({ type: MATCHING_REQUEST });
...Matching algorithm...
//Dispatches
firebase.firestore().collection("users").doc(userspool[number].id).get()
.then((doc) => {
dispatch(startConversation(userspool[number].id, doc.data(), userprofile, {time: "", from: "", content: ""}));
dispatch({ type: MATCHING_SUCCESS, payload: doc.data() });
})
if (buddy === "") {
dispatch({ type: MATCHING_FAIL, payload: [] });
}
console.log(buddy);
}
const initialState = {
......
loading: false,
chatid: "",
buddy: [],
}
const authReducer = (state = initialState, action) => {
const {type, payload} = action;
switch(type) {
......
case CHAT_SUCCESS:
return {
...state,
chatid: action.payload
}
case MATCHING_REQUEST:
return {
...state,
loading: true
}
case MATCHING_SUCCESS:
return {
...state,
buddy: action.payload,
loading: false
}
case MATCHING_FAIL:
return {
...state,
buddy: action.payload,
loading: false
}
default: return state;
}
}
class MatchingBox extends Component {
state = {
show: true,
loading: false,
chatid: "",
buddy: []
}
componentDidMount() {
this.setState({
loading: this.props.loading,
})
}
componentDidUpdate(prevprops) {
console.log(this.props.chatid);
console.log(this.props.buddy.first_name);
if (prevprops.loading !== this.props.loading) {
this.setState({
loading: this.props.loading,
chatid: this.props.chatid,
buddy: this.props.buddy
})
}
}
render() {
let box;
if (this.props.loading === true) {
box = <span>Loading...</span>
}
else {
if (this.props.buddy.length !== 0) {
box = <div>
<div className="form-inline">
<img src={this.state.buddy.image}></img>
<img src={this.props.profile.image}></img>
</div>
<MatchingWindow chatid={this.state.chatid} />
</div>
}
else {
box = <span>Sorry we cannot help you find a study/work buddy currently</span>
}
}
return (
<Modal show={this.state.show}>
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
{box}
</Modal.Body>
</Modal>
);
}
}
const mapStateToProps = (state) => {
return {
auth: state.firebase.auth,
loading: state.auth.loading,
chatid: state.auth.chatid,
buddy: state.auth.buddy,
profile: state.firebase.profile
};
}
export default connect(mapStateToProps)(MatchingBox);
类匹配框扩展组件{
状态={
秀：没错，
加载：false，
查蒂德：“，
好友：[]
}
componentDidMount（）{
这是我的国家({
加载：这个.props.load，
})
}
componentDidUpdate（prevprops）{
console.log（this.props.chatid）；
console.log（this.props.buddy.first_name）；
if（prevprops.loading！==此.props.loading）{
这是我的国家({
加载：这个.props.load，
chatid:this.props.chatid，
巴迪：这个。道具。巴迪
})
}
}
render（）{
盒子；
if（this.props.load===true）{
盒子=正在加载。。。
}
否则{
如果（this.props.buddy.length！==0）{
方框=
}
否则{
box=很抱歉，我们目前无法帮助您找到学习/工作伙伴
}
}
返回(
{box}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
auth:state.firebase.auth，
加载：state.auth.loading，
chatid:state.auth.chatid，
好友：state.auth.buddy，
配置文件：state.firebase.profile
};
}
导出默认连接（MapStateTops）（匹配框）；
startConversationMATCHING\u SUCCESSMATCHING\u FAILMATCHING\u REQUEST<> > <代码>启动会话< /C>是异步的，您需要在解析之后执行这些分派，您应该考虑调用<代码> MatcIn成功> <代码>和<代码> MatCHIGION <0>代码> <代码> StistTalk .< /P> < p>看起来您正在使用ReDuxSunBand，如所述： Redux Thunk中间件允许您编写返回 一个函数而不是一个动作。thunk可用于延迟 动作的分派，或仅在特定条件满足时分派 遇见。内部函数接收存储方法和分派 getState作为参数 您的action reducer
startConversationMATCHING\u SUCCESSMATCHING\u FAILMATCHING\u REQUEST自从