Redux:我如何让两个Reducer以特定顺序响应同一个动作？

Question

我对Redux比较新,我有以下情况:

1. 我的应用程序发出一个AJAX请求,从服务器获取第一个"消息"对象
2. 响应回来并发送 {type: 'RECEIVE_FIRST_MESSAGE', message}

3. 我的MessageReducer处理方式RECEIVE_FIRST_MESSAGE是:

   A)加入action.message到state.messages

   B)进行另一次AJAX调用以获取下一条消息(如果action.message.hasNextMessage)

4. 我SessionReducer也RECEIVE_FIRST_MESSAGE通过添加action.message.sessionId来处理state.session.id

只有一个问题:当我获取第二条消息时,我需要使用sessionId我从第一条消息中获取的消息.但是因为MessageReducer之前运行SessionReducer,会话ID不是在MessageReducer尝试发出第二个AJAX请求时的状态.

我可以通过使用超时来"解决"这个问题,以确保MessageReducer在1毫秒之后不再发出第二个请求,但这感觉就像一个黑客/反模式.

TLDR

当我有:

• 具有两部分数据的动作state(由两个不同的减速器处理)
• 我想从reducer A触发响应的AJAX调用
• 我想state.session.id从reducer B中添加一些state()作为响应

如何在减速器A进行AJAX调用之前确保减速器B添加状态(以不会让Dan Abramov哭的方式)？

Answer 1

首先要做的事情.切勿从减速机内部进行AJAX调用.永远.https://www.youtube.com/watch?v=Q-lv8kyYrqQ

Reducer函数应该是纯粹的,没有任何副作用(如HTTP请求).相反,使用thunks对你有利.以下是如何执行此操作的示例.

从服务器获取第一个消息响应后,您将分派RECEIVE_FIRST_MESSAGE操作.这将同步更新state atom.完成后,您可以检查消息是否有下一条消息.如果是,则调度新的异步操作以获取下一条消息.在异步操作创建器中,您可以从state atom获取会话ID,保证更新以响应RECEIVE_FIRST_MESSAGE您之前调度的操作.

如果您有任何疑问,请告诉我.

// getFirstMessageFromServer() and getNextMessageFromServer() are thunks and async action creators
// fetchFirstMessage() and fetchNextMessage() make HTTP requests

function getFirstMessageFromServer() {
  return (dispatch, getState) => {
    return fetchFirstMessage()
      .then(message => {
        dispatch({ type: 'RECEIVE_FIRST_MESSAGE', message });
        if (message.hasNextMessage) dispatch(getNextMessageFromServer());
        return message;
      });
  };
}

function getNextMessageFromServer() {
  return (dispatch, getState) => {
    const { id: sessionId } = getState().session.id;
    return fetchNextMessage(sessionId)
      .then(nextMessage => {
        dispatch({ type: 'RECEIVE_NEXT_MESSAGE', message: nextMessage });
        return nextMessage;
      });
  };
}


const rootReducer = combineReducers({
  session: sessionReducer,
  messages: messagesReducer
});

const initialMessages = [];

function messagesReducer(state = initialMessages, action) {
  switch(action.type) {
    case 'RECEIVE_FIRST_MESSAGE':
      return state.concat(action.message);
    case 'RECEIVE_NEXT_MESSAGE':
      return state.concat(action.message);
    default:
      return state;
  }
}

const initialSession = { id: null };

function sessionReducer(state = initialSession, action) {
  switch(action.type) {
    case 'RECEIVE_FIRST_MESSAGE':
      return {
        ...state,
        id: action.message.sessionId
      };
    default:
      return state;
  }
}