如何填充商店並使用Redux Observable按順序返回等待？

我正在嘗試使用Redux Observable來調用一個操作來獲取一些數據，等待它的返回，然後獲取更多依賴它的數據。如何填充商店並使用Redux Observable按順序返回等待？

我有一個史詩從填充FetchTodos填充商店。這聽取FETCH_TODOS行動，然後調用我的todos API和填充{todos: [] } =

我的店裏還有一個評論部分todoComments。但是，我只想填充todoComments，一旦FETCH_TODOS已返回並填充該商店。

在必要的代碼，這可能是這樣的：

let todos = await api.get('/todos'); 
await dispatch("FETCH_TODO_COMPLETE", todos) 
let firstId = getState().todos[0].id 
let comments = await api.get(`/todos/${firstId}/comments') 
await dispatch("FETCH_COMMENTS_COMPLETE", { todo_id: firstId, comments})

我看到這個最接近的是在終極版可觀察回購this issue，但我不明白如何有效地做到這一點。這對我來說是非常普遍的情況。

我想重複使用儘可能多的代碼。在這個例子中，我可以從多個組件派遣FETCH_TODOS。

如何使用Redux-Observable完成此操作？根據我們的意見談話

來源

2017-05-27 Doug

在你的榜樣，你只取第一個待辦事項的評論列表中的'讓firstId =的getState（）待辦事項[0] .id'是你想要做什麼，或你想要通過ID獲取特定待辦事項的評論，或者想要獲得所有待辦事項的評論？ – jayphelps

這更多的是爲了表明評論將不得不等待待辦事項。提取和訪問中間狀態的順序是關鍵部分。 – Doug

它改變你如何去做。 – jayphelps

：

在終極版，可觀察到的，你可以通過多種方式排序的事情。你可以用普通的RxJS在一個史詩中完成所有的事情，或者你可以將它們分成多個。如果你將它們分開，隨後的史詩將聽取前一個完成任務的信號。事情是這樣的：

// this assumes you make your `api.get` helper return an Observable 
// instead of a Promise which is highly advisable. 
// If it doesn't, you could do: 
// Observable.from(api.get('/url')) 
// but Promises are not truly cancellable which can cause max 
// concurrent connections issues 

const fetchTodosEpic = action$ => 
    action$.ofType('FETCH_TODOS') 
    .switchMap(() => 
     api.get('/todos') 
     .map(todos => ({ 
      type: 'FETCH_TODOS_COMPLETE', 
      todos 
     })) 
    ); 

const fetchComments = action$ => 
    action$.ofType('FETCH_TODOS_COMPLETE') 
    .switchMap(({ todos }) => 
     api.get(`/todos/${todos[0].id}/comments`) 
     .map(comments => ({ 
      type: 'FETCH_COMMENTS_COMPLETE', 
      comments 
     })) 
    );

來源

2017-05-27 20:38:58 jayphelps

有了這兩部史詩，我將如何將它們組合成一個史詩般的電話？想象一下，我登陸了評論頁面，只有評論的ID，並且必須獲取所有待辦事項和所有評論來呈現組件。也就是說，有一個名爲FETCH_COMMENT的動作傳遞了評論ID，但我必須獲取所有todos，然後將所有評論放入我的redux商店中以查找該評論。 – Doug

如果您有評論ID，您爲什麼需要等待其他內容？ – jayphelps

@jayphelps如果你想連鎖2個動作（第一個調用4個不同的查詢，另一個如果全部4個查詢成功則觸發reducer），那麼怎麼辦？有可能使用可重複觀察？ – petithomme

如何填充商店並使用Redux Observable按順序返回等待？

回答

相關問題