react-saga is an attempt to make data / logic dependencies declarative in the same way as UI. following code manages 3 sagas (AuthenticatedApi, AnotherAuthenticatedSaga, GuestApi) based on authentication state and current user id. react-saga forks / cancels sagas based on their presence in render tree and passed props. in this case AnotherAuthenticatedSaga is running when user is authenticated, AuthenticatedApi is running when authenticated as well, but restarts on userId changes.
import React from 'react';
import { put } from 'redux-saga/effects';
import { reactSaga, Group } from 'react-saga';
function *AuthenticatedApi({ userId }) {
yield put({ type: 'USER_ID_CHANGED', userId });
while (true) {
// handle authenticated api calls
}
}
function *AnotherAuthenticatedSaga() {
// whatever
}
function *GuestApi() {
while (true) {
// handle guest api calls
}
}
function Api({ state: { authenticated, userId } }) {
if (authenticated) {
return (
<Group>
<AuthenticatedApi userId={userId}/>
<AnotherAuthenticatedSaga/>
</Group>
);
}
return <GuestApi/>;
}
export default reactSaga(<Api/>);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent