按顺序执行的剩余调度操作

Question

我正在为我的网站建立一个随机匹配功能。在startMatching Redux操作的末尾，如果匹配成功，我想在调度MATCHING_SUCCESS之前再分派另一个名为startConversation的操作。startConversation操作用于在两个用户之间创建或更新聊天历史记录，并将发送存储聊天历史记录的消防站文档的id作为最终的有效负载。由于(1) startConversation是在MATCHING_SUCCESS之前分派的，(2) startConversation分发聊天历史文档的id，所以我可以在Redux状态下创建一个名为chatid的字段，以便在匹配成功后访问文档的id，并使用它生成类似聊天窗口的内容。

我一直在用一种情况测试代码，在这种情况下，应该成功地进行匹配。我遇到的问题是，第一次调度(startConversation)是在第二次调度(MATCHING_SUCCESS)完成之后完成的。我之所以知道这一点，是因为我将console.log放在MatchingBox组件的componentDidUpdate方法中，并在startConversation操作的末尾执行，而前者中的console.log比后者更早地执行，这意味着MATCHING_SUCCESS在startConversation之前完成了调度，这导致了Redux状态的改变，从而支持了组件。实际上，处于MatchingBox组件状态的好友和加载字段已经更新，chatid仍然是空字符串。我不希望这种情况发生，因为正如您所看到的，我需要将chatid进一步传递到MatchingWindow组件。

这让我感到困惑:毕竟，Redux不是同步的吗？另外，我尝试用“那时”链接这两个调度，startConversation仍然比MATCHING_SUCCESS晚完成了调度。我想知道怎样才能解决这个问题。非常感谢您的耐心！

Redux操作

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

MatchingBox组件

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

Answer 1

它看起来是在使用redux，就像文档说的：

Redux中间件允许您编写返回函数而不是动作的动作创建者。thunk可以用于延迟(动作的分派)，或者仅用于在满足某一条件的情况下进行调度。内部函数接收存储方法调度和getState作为参数。

您的动作还原器startConversation做了一些异步操作，对吗？这样，redux thunk将保留要执行的调度，直到其解析为止，但不会阻止执行以下代码。

立即执行下一行MATCHING_SUCCESS，它不会等待解决上一个挂起的问题。同样，MATCHING_FAIL超出了预期，很可能是在所有分发之前触发的(除MATCHING_REQUEST外)。

由于startConversation是异步的，并且需要在解析后执行这些分派，所以您应该考虑在startConversation上调用MATCHING_SUCCESS和MATCHING_FAIL。