从其他史诗中调用史诗 [英] Invoking epics from within other epics

问题描述

首先，这个很棒的图书馆有很多道具！不过，我仍然在为一个用例而苦苦挣扎.我想先调用另一个史诗并等待它完成，然后再继续当前的史诗.假设我有一个用户可以更改内容的表单.在将其他数据加载到表单中之前，我想先保存当前的更改.对此有什么想法吗?

First of all many props for this awesome library! I am still struggling with an use case though. I would like to call another epic first and wait till it completes before continuing the current epic. Let's say I have a form where an user can change things. Before loading other data into the form, I want to save the current changes first. Any thoughts on this?

推荐答案

听起来像您想要的:如果一部史诗想开始另一部史诗的工作并且等待它完成后再继续.

Sounds like you want: if one epic would like to kick off another epics work and wait for it to complete before proceeding.

一种方法是(使用伪名称)，当接收到初始动作 LOAD_OTHER_DATA 时，您立即开始侦听单个 SAVE_FORM_FULFILLED，它表示表单已保存(我们稍后会开始).收到后，我们将mergeMap(或switchMap，在这种情况下无关紧要)放入我们的调用中以加载其他数据loadOtherDataSomehow()并做通常的生意.最后，开始我们正在等待的表单的实际保存的技巧是在整个链的末尾添加一个 startWith() —— 这将发出并分派动作以实际保存表格.

One approach is (using pseudo names), when receiving the initial action LOAD_OTHER_DATA you immediately start listening for a single SAVE_FORM_FULFILLED, which signals that the form has been saved (we'll kick it off in a bit). When received, we mergeMap (or switchMap, doesn't matter in this case) that into our call to load the other data loadOtherDataSomehow() and do the usual business. Finally, the trick to kick off the actual saving of the form we're waiting for is adding a startWith() at the end of that entire chain--which will emit and dispatch the action to actually save the form.

const saveFormEpic = (action$, store) =>
  action$
    .ofType('SAVE_FORM')
    .switchMap(() =>
      saveFormSomeHow(store.getState().formDataSomewhere)
        .map(details => ({
          type: 'SAVE_FORM_FULFILLED'
        }))
    );

const loadOtherDataEpic = action$ =>
  action$
    .ofType('LOAD_OTHER_DATA')
    .switchMap(() =>
      action$.ofType('SAVE_FORM_FULFILLED')
        .take(1) // don't listen forever! IMPORTANT!
        .mergeMap(() =>
          loadOtherDataSomeHow()
            .map(otherData => ({
              type: 'LOAD_OTHER_DATA_FULFILLED',
              payload: otherData
            }))
        )
        .startWith({
          type: 'SAVE_FORM'
        })
    );

您没有提到加载和保存的工作原理，因此这只是您需要针对用例修改的伪代码.

You didn't mention how your loading and saving works, so this is just pseudo code that you'll need to amend for your use case.

这篇关于从其他史诗中调用史诗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！