RXJS redux observable 执行多个 api 调用

Question

我有一个联系人数组，想对联系人数组中的每个对象执行 API 调用。 我试图遍历每个项目并调用 fetchJson$，但是，我意识到这种方法是不正确的。

使用 RXJS Redux 可观察量执行此操作的正确方法是什么？

此外，这是用于此问题的伪代码，因此请忽略任何语法错误。

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(...参数，选择器：函数(：可观察。 当所有可观察量完成后，从每个可观察量发出最后一个发出的值。

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