Основная навигация моего приложения должна вызывать API loggedInUser, чтобы позволить мне отображать различные ссылки в зависимости от того, вошел ли пользователь в систему. Этот API также используется во многих других частях моего приложения.Я использую Redux для управления состоянием, поэтому после запуска этого API я могу получить данные через хранилище Redux из любого подключенного компонента.
У меня также есть компонент ContentPage, который onEnter загружает содержимое через loadContentAPI.ContentPage - это компонент контейнера, который подключен к хранилищу Redux.
Наконец, у меня также есть API isFavourite, который принимает идентификатор и тип содержимого (возвращенный из loadContent API) и позволяет мнепереключать «любимую» кнопку на странице в зависимости от ответа.Этот API следует вызывать только после того, как оба API loadContent и loggedInUser сработали (мне не нужно беспокоиться об использовании API, если пользователь не вошел в систему).
Код нижеработает нормально, если API loggedInUser завершается до API loadContent, но не наоборот.Я изо всех сил пытаюсь придумать самый чистый способ сделать так, чтобы порядок, в котором возвращаемые данные API не влияли на логику.Если бы оба API запускались из одного и того же компонента, я мог бы сделать что-то вроде этого (поскольку я использую Fetch для вызовов API) ...
<Route
path={'Content/:id'}
component={ContentPage}
onEnter={(nextState) => {
// Needs to be synchronous
store.dispatch(loadSession(nextState.params.id)).then(() =>
store.dispatch(getLoggedInUser()),
);
}}
/>
... но поскольку они независимы, я не наденуНе знаю, как лучше подходить.
import React from 'react';
import { Route } from 'react-router';
import configureStore from './store/configureStore';
import { getLoggedInUser } from './actions/userActions';
import { loadContent } from './actions/contentActions';
import App from './components/App';
import ContentPage from './components/ContentPage';
export const store = configureStore();
export const routes = (
<Route
path={'/'}
component={App}
onEnter={() => store.dispatch(getLoggedInUser())}
>
<Route
path={'Content/:id'}
component={ContentPage}
onEnter={nextState => store.dispatch(loadContent(nextState.params.id))}
/>
</Route>
);
Это упрощенная версия моего компонента ContentPage.
class ContentPage extends Component {
componentWillReceiveProps(nextProps) {
if (this.props.content.id !== nextProps.content.id) {
// If the loggedInUser API hasn't yet fired then this if statement will never return true
if (this.props.loggedInUser.id) {
// I only want to fire this API if both the loggedInUser API and the loadContent API have both fired
this.props.actions.isFavourite(nextProps.content.id, nextProps.content.type);
}
}
}
}