等待redux存储的特定属性从React组件外部更新

时间:2019-11-06 18:57:54

标签: javascript reactjs redux redux-saga redux-thunk

通常,我将在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被更新。

0 个答案:

没有答案