Наблюдаемая RXJS-избыточность выполняет несколько вызовов API

Question

У меня есть массив контактов, и я хотел бы выполнить вызовы API для каждого объекта в массиве контактов. Я попытался перебрать каждый элемент и вызвать fetchJson $, однако я понимаю, что этот подход неверен.

Как правильно сделать это с помощью RXJS Redux Observables?

Кроме того, это псевдокод для целей этого вопроса, поэтому, пожалуйста, игнорируйте любые синтаксические ошибки.

export const createPost = (action$, store) => (
  action$.ofType(UPDATE_USER_CONTACTS)
    .switchMap(() => {
      const state = store.getState();
      const userToken = getUserToken(state);
       const userId = getuserId(state);
       const listOfContacts = getListUserContacts(state);

      return Observable.concat(
        // 1. show loading
        Observable.of(showSpinner()),
        // 2. set the timer
        Observable.defer(() => {

          const contacts = [
            {
              id: '123',
              name: 'Paul',
              phoneNumber: '000-000-00'
            },
            {
              id: '098',
              name: 'Sarah',
              phoneNumber: '111-111-11'
            },
          ]

          contacts.forEach((contact) => { 
            return fetchJson$('PUT', `${API_URL}/users/${userId}/user_contacts/${contact.id}`, userToken, {
              id: contact.id,
              name: contact.name,
              phoneNumber: contact.phoneNumber,
            })
          }, false)
            .flatMap(() => (
              Observable.of(
                reset(),
                notification({
                  icon: 'm-timers',
                  text: '<b>Good - worked</b>.',
                }),
              )
            ))
            .catch(({ response }) => {
              const responseArray = [];
              if (response) {
                console.log(response, 'there was a response')
              }
              return Observable.of(...responseArray);
            });
        }),
        Observable.defer(() => {
          // perform another action here
        },
        // 4. hide loading
        Observable.of(hideSpinner()),
      );
    })
);

Answer 1

Я думаю, что вы ищете forkJoin :

подпись: forkJoin (... args, селектор: функция): наблюдаемый. Когда все наблюдаемые завершены, испустите последнее излученное значение из каждого.

const contacts = [
    {
        id: '123',
        name: 'Paul',
        phoneNumber: '000-000-00'
    },
    {
        id: '098',
        name: 'Sarah',
        phoneNumber: '111-111-11'
    },
];
Observable.forkJoin(
    contacts.map((contact) => {
            return fetchJson$('PUT', `${API_URL}/users/${userId}/user_contacts/${contact.id}`, userToken, {
                id: contact.id,
                name: contact.name,
                phoneNumber: contact.phoneNumber,
            })
        }
    )
);