Redux：我如何讓兩個減速器以特定順序響應相同的動作？

Question

我是比較新的終極版，和我有以下情況：

1. 我的應用程序，使一個AJAX請求的響應回來，並調度{type: 'RECEIVE_FIRST_MESSAGE', message}從服務器獲取的第一個「消息」對象

3. 我MessageReducer通過處理RECEIVE_FIRST_MESSAGE：

   A）加入到action.messagestate.messages

   B）進行另一AJAX調用來獲取下一條消息（如果action.message.hasNextMessage）

4. 我SessionReducer也處理RECEIVE_FIRST_MESSAGE，加入action.message.sessionId到state.session.id

這裏只有一個問題：當我取第二消息，我需要使用我從第一條消息獲得的sessionId。但是因爲MessageReducer在SessionReducer之前運行，所以會話ID不在MessageReducer嘗試發出第二個AJAX請求時的狀態。

我可以通過使用超時來「解決」這個問題，以確保MessageReducer在1ms之後不會使其成爲第二個請求，但是這感覺像是一種黑客/反模式。

TLDR

當我有：

• 其對於state（由兩個不同的減速處理）兩個部分組成
• 我想觸發一個AJAX調用數據的動作反應，從減速機A
• 我想添加一些狀態（state.session.id）作爲迴應，從減速機B

如何確保減速器B在減速器A使AJAX調用（以不會使丹阿布拉莫夫哭泣的方式）之前添加狀態？

Answer 1

第一件事是第一件事。切勿在減速器內進行AJAX調用。永遠。 https://www.youtube.com/watch?v=Q-lv8kyYrqQ

Reducer函數應該是純粹的，沒有任何副作用（如HTTP請求）。相反，使用thunks是有利的。下面是你如何做到這一點的例子。

從服務器獲取第一條消息響應後，您會發送RECEIVE_FIRST_MESSAGE操作。這將同步更新狀態原子。完成後，您可以檢查消息是否有下一條消息。如果確實如此，則派遣新的異步操作以獲取下一條消息。在該異步操作創建器內部，您可以從狀態原子獲取會話標識，該標識保證會根據之前分派的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; 
    } 
}