Как отрендерить страницу после получения данных

Question

У меня есть следующая функция для проверки пользователей

export const authCheckState = () => {
  return dispatch => {
    const token = localStorage.getItem("token");
    const email = localStorage.getItem("email");
    if (token === undefined) {
      dispatch(logout());
    } else {
      const expirationDate = new Date(localStorage.getItem("expirationDate"));
      if (expirationDate <= new Date()) {
        dispatch(logout());
      } else {
        dispatch(authSuccess(email, token));
        dispatch(
          checkAuthTimeout(
            (expirationDate.getTime() - new Date().getTime()) / 1000
          )
        );
      }
    }
  };
};

И для этого я выполнил специальную функцию инициализации, которая примет все необходимые функции и отправит их

initialState = {
    initialized: false
};

const appReducer = (state = initialState, action) => {
    switch (action.type) {
        case INITIALIZED_SUCCESS:
            return {
                ...state,
                initialized: true
            }

        default:
            return state;
    }
}


export const initializedSuccess = () => ({type: INITIALIZED_SUCCESS});

export const initializeApp = () => (dispatch) => {
    let promise = dispatch(authCheckState());

    Promise.all([promise])
    .then(() => {
        dispatch(initializedSuccess());
    });
}

И после этого я помещаю функцию инициализации в функцию componentDidMount приложения

componentDidMount() {
    this.props.initializeApp();
  }

и после того, как я это сделаю

const mapStateToProps = (state) => ({
  initialized: state.app.initialized
})

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

Answer 1

Вы должны получать данные в самом компоненте. Используйте Redux для хранения данных, чтобы вы могли использовать их позже или манипулировать ими. (Если вам нужно это сделать!)

Так и должен быть процесс,

1. Сделайте запрос API на componentDidMount.
2. Сохраните данные в redux.
3. Используйте эти данные в компоненте, поступающем в виде реквизитов с помощью Redux.