Question

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

我有一个epic，它通过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中的this issue，但我无法理解如何有效地做到这一点。对我来说这是一个很常见的场景。

我想尽可能多地重用代码。在此示例中，我可能会从多个组件发送FETCH_TODOS。

如何使用Redux-Observable完成此操作？

Answer 1

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

在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
        }))
    );

如何填充商店并使用Redux Observable顺序等待返回？

1 个答案: