我正在为我的网站构建随机匹配功能。在 startMatching Redux 动作结束时,如果匹配成功,我想在调度 MATCHING_SUCCESS 之前调度另一个名为 startConversation 的动作。startConversation 操作用于创建或更新 2 个用户之间的聊天历史记录,并将在最后发送存储聊天历史记录作为有效负载的 firestore 文档的 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 组件状态中的 buddy 和 loading 字段已更新,而 chatid 仍为空字符串。我不希望这种情况发生,因为如您所见,我需要将 chatid 进一步向下传递给 MatchingWindow 组件。
这让我很困惑:毕竟,Redux 不是同步的吗?此外,我尝试使用“then”链接 2 个调度,并且 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);
}
Redux 减速器
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);