通常,我将在React组件中执行的工作是使用connect
函数来订阅redux存储,在这种情况下,我可以访问redux存储并知道它何时更新。
我想等待商店从组件外部以及.js文件中进行更新。
这是我到目前为止所做的:
//socket-client.js file
import { store } from "../../Redux/store";
//socket.on() function
socket.on(
"setQuestionsArrayOnTheAccepter",
async ({ questionsArray, roomNameOnTheStore }) => {
await store.dispatch(setQuestionsArray(questionsArray)); // this await on the setQuestionArray has no effect
store.dispatch(setGameProgress());
const { game } = store.getState();
const { gameQuestionArray, gameResultArray } = game;
// gameResultArray = [] will be empty here, and I want the saga to finish before the socket.emit
socket.emit("sendSetQuestionsArrayOnTheSender", {
gameQuestionArray,
gameResultArray,
roomNameOnTheStore
});
}
);
问题是gameResultArray默认为空([]),并且从setQuestionsArray操作中,我调度了一个异步的redux-saga,并使用Axios(fetchGameResultStart saga)
// set QuestionsArray action
export const setQuestionsArray = (
questionsArray,
shouldShuffle = true,
multiplayer = false,
gameResultArray = null
) => {
if (shouldShuffle) questionsArray = getRandom(questionsArray, 10);
// using thunk middelware
return dispatch => {
dispatch({ type: GAME_TYPES.SET_QUESTIONS_ARRAY, payload: questionsArray });
if (!multiplayer) {
dispatch(fetchGameResultArrayStart(questionsArray, shouldShuffle));
} else if (gameResultArray) {
dispatch(fetchGameResultArraySuccess(gameResultArray));
}
};
};
所以,我希望能够在运行socket.emit()之前等待fetchGameResultArraySuccess操作被调度,以及gameResultArray被更新。