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

RXJS Redux可观察到执行多个API调用

1 个答案: