Где лучше всего выполнять вызовы API в приложении маршрутизатора реакции / сокращения / охвата?

Question

Я изо всех сил пытаюсь понять, где лучше всего выполнять вызовы API в моем приложении?

Мой основной компонент выглядит так:

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <Router />
        </Provider>
    </React.StrictMode>,
    document.getElementById('root'),
)

и внутри Router У меня есть все маршруты. некоторые из моих других страниц требуют выполнения вызовов API к серверу для получения информации, поэтому мне интересно, где лучше всего было бы разместить их?

У меня есть компонент под названием PageOne, и там я делаю вызов API при монтировании, чтобы получить некоторые данные и затем добавить их в мое состояние redux. но мне также нужны те же данные в моем компоненте PageTwo. очевидно, что если пользователь переходит через PageOne> PageTwo, это нормально, потому что эти данные находятся в хранилище redux, поэтому я просто беру их. но мне интересно, перешли ли они прямо к PageTwo или обновили страницу, пока на PageTwo. эти данные больше не будут извлекаться.

поэтому мои варианты выглядят так:

1. снова получить данные на PageTwo. но похоже, что я мог бы делать много запросов (плюс ненужные запросы, которые я мог бы получать, когда он у меня уже есть)
2. могу ли я поместить выборку внутри компонента маршрутизатора? Думаю, это всегда срабатывает, независимо от того, на какую страницу я перешел. но опять же, я бы потенциально мог выполнять ненужные запросы

есть ли какой-нибудь «хороший» / лучший способ справиться с этим?

Answer 1

Вам нужно поместить лог c извлечения данных в действие redux, где вам нужно просто вызывать одно и то же действие отправки всякий раз, когда вы хотите получить данные.

Вот так:

return async dispatch => {
       const res = await axios.post(`${rootUrl}/login`, data);
              localStorage.setItem("authToken", 

    JSON.stringify(res.data.authToken));
                  // Set token
                  // setTokenToAxios(res.data.authToken);
                  dispatch({
                    type: USER_LOGIN_SUCCESS,
                    data: res.data.authToken
                  });
    };

Вы можете отправить или вызвать действие в componentDidMount или useEffect (), что бы вы ни использовали.

Вы можете поместить invoke или отправить действие в обоих компонентах с флагом, чтобы избежать ненужной выборки данных.