Блог

Главная - Вопросы по программированию - Переопределение хранилища не определено при обновлении страницы

Переопределение хранилища не определено при обновлении страницы

#reactjs #redux #react-redux #react-router

#reactjs #сокращение #react-redux #реагировать-маршрутизатор

Вопрос:

Получая currentUser из хранилища redux, я авторизовываю маршрутизатор react.

Проблем с переключением между страницами нет, но когда я обновляю страницу, требующую авторизации, я не могу авторизовать ее, потому currentUser что она не определена.

componentDidMount

  componentDidMount(){
    this.props.actions.getCurrentUser()
  }

Маршрутизатор

   <Route exact path="/profile/:id/settings" render={(props) => {
            var urlId = props.match.params.id;
        return this.props.isLogged ? this.props.currentUser.id == urlId ? < ProfileSettings {...props} /> : <Redirect to={"/profile/"   urlId} /> : <Redirect to="/" />;
          }
   } />

react-redux

 function mapDispatchToProps(dispatch) {
  return {
    actions: {
      getCurrentUser: bindActionCreators(authAsyncActions.getCurrentUserApi, dispatch)
    }
  }
}
function mapStateToProps(state) {
  return {
    isLogged: state.isLoggedReducer,
    currentUser: state.currentUserReducer
  }
}

getCurrentUserApi

 export function getCurrentUserApi() {
    return async (dispatch, getState) => {
        if (localStorageHelper.isExistsToken()) {
            if (Object.keys(getState().currentUserReducer).length == 0) {
                await axios.get(CURRENT_USER_PATH, {
                    headers: localStorageHelper.authHeaderObj()
                }).then(res => {
                    dispatch(authActionsCreators.currentUserSuccess(res.data))
                    dispatch(authActionsCreators.isLoggedTSuccess())
                }).catch(err => {
                    if (err.response.status === 401) {
                        var refreshToken = bindActionCreators(refreshTokenApi, dispatch)
                        refreshToken();
                    }
                })
            }
        }
    }
}

Комментарии:

1. ` this.props.actions.getCurrentUser()` это должно повлиять на ваше использование. Это не должно использоваться так, как вы его использовали. Опубликуйте свой полный код или создайте изолированную среду.

2. Я не использовал хуки, я использовал компонент класса

3. тогда эта функция должна быть в вашем componentDidMount . Попробуйте создать изолированную среду.

4. Пробовал, но все равно не определено.

5. В каком контейнере вы вызываете this.props.actions.getCurrentUser() ? Если действие действительно отправляется, вы, вероятно, сталкиваетесь с проблемой, заключающейся в том, что это асинхронное действие. Существует несколько способов решить эту проблему, например, с помощью компонента переноса, который не отображает маршруты, когда вызов CurrentUser находится в состоянии загрузки.