Как запустить действие после входа в систему с помощью response-redux и response-aad-msal?

Question

Я создал приложение, которое использует response-redux и react-aad-msal для обработки входа в AD. Я могу войти и выйти из системы без каких-либо проблем, но после того, как пользователь вошел в систему, я хочу вызвать вызов API для извлечения данных из API. Я не уверен, как запустить это действие как при ручном, так и при принудительном входе в систему с использованием компонента AzureAD и необходимого authProvider.

На данный момент я добавил вызов в свой компонент индекса в функцию componentDidMount для вызова API для получения данных, но если пользователь не находится на странице индекса и обновляет страницу, приложение прерывается, поскольку вызов API не выполняется. срабатывает после завершения входа в AD.

Я не хочу запускать вызов в моем редукторе аутентификации, который, я думаю, был бы антипаттерном в отношении Redux и того, как его предполагается использовать.

Как я могу задействовать действия "AAD_LOGIN_SUCCESS" или "AAD_INITIALIZED", чтобы мой вызов API всегда запускался после входа в систему и, таким образом, избегая добавления логики в мои компоненты?

Это в основном то, что у меня есть на данный момент, и оно работает, но не в том случае, если вы находитесь на странице / some-other-page и нажимаете кнопку "Обновить", поскольку это не приведет к вызову API.

App.js

...
<Router>
    <Header />
    <AzureAD provider={ authProvider } reduxStore={ reduxStore } forceLogin={ true }>
        <Switch>
            <Route exact path="/">
                <EnvironmentsOverview />
            </Route>
            <Route path="/some-other-page">
                <SomeOtherPage />
            </Route>
            <Route path="*">
                <NotFound />
            </Route>
        </Switch>
    </AzureAD>
</Router>
...

Среды Overview.js

...
export class EnvironmentsOverview extends Component {
    componentDidMount() {
        this.props.getSystemsAndEnvironments();
    }

    render() {
        ...
    }
}
...

Answer 1

Зависит от того, как вы хотите справиться с этим, но для меня я счастлив использовать redux-saga, вы можете сделать что-то похожее на thunk, если это ваш предпочтительный выбор.

1. Простой наблюдатель за событием входа в систему
2. Рабочий, чтобы отключить любые побочные эффекты, которые вам понадобятся для входа в систему, например, асинхронные или блокирующие запросы / соединения, которые вам нужно сделать.
3. Возможна отправка других действий из вашей рабочей функции

ПРИМЕЧАНИЕ. Документы redux-saga великолепны, очень подробны, но это пример того, что я только что сделал для вашего конкретного случая использования:

import { takeLatest, put, call } from 'redux-saga/effects';

//watcher 
function* watchForLoginSuccess() {
    yield takeLatest('AAD_LOGIN_SUCCESS', doPostLoginWorker); 
};

//worker
function* doPostLoginWorker() {
    try {
        //async action 
        const response = yield call(functionRefToFetchData, someParameterForFunction);
        //Dispatch another action with returned async data
        yield put(addUserData(response)); 
    } catch (error) {
        //dispatch an error action with the error info as payload
        yield put(addError(error));
    }
};

export default [
    watchForLoginSuccess
]