3

我正在尝试使用 Redux Observable 调用一个操作来获取一些数据，等待它的返回，然后获取更多依赖它的数据。

我有一个从 fetch 填充商店的史诗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})

我最接近这个问题的是 Redux Observable Repo 中的这个问题，但我不明白如何有效地做到这一点。这对我来说是一个很常见的场景。

我想尽可能多地重用代码。FETCH_TODOS在这个例子中，我可以从多个组件中 调度。

我将如何使用 Redux-Observable 完成此任务？

4

1 回答 1

2

根据我们在评论中的对话：

在 redux-observable 中，您可以通过多种方式对事物进行排序。你可以使用普通的 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-27T20:38:58.130 回答