Получение данных из API перед рендерингом компонента React, Redux - PullRequest
Новая
       9

Получение данных из API перед рендерингом компонента React, Redux

0 голосов
/ 11 марта 2019

Мое начальное состояние в магазине приставки 

const initialState = {
  token:localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  user:null,


}

Мой компонент приложения выглядит следующим образом: store.dispatch (loadUser ()); проверить токен локального хранилища и загрузить пользователя из API, если токен существует и исправлен. 

class App extends Component {
componentWillMount() {
  store.dispatch(loadUser());
}
render() {
  return (
    <div className="App">
      <Provider store={store}>        
      <Router>            
          <BaseRouter/>            
      </Router>
    </Provider>  
  </div>
 );
 }
}

export default App;

все работает нормально, но когда я перезагружаю компонент в браузере, он сразу же перенаправляет меня к компоненту, несмотря на то, что инструменты dev-редукса показывают, что пользователь загружен и isAuthenticated: true . Мой вопрос: как я могу загрузить мой избыточный магазин перед функцией render () ?? Или есть другие идеи, чтобы заставить его работать правильно ?? 

class ArticleList extends Component{
static propTypes = {
    articles: PropTypes.array.isRequired,
    getArticles: PropTypes.func.isRequired,
}

componentWillMount(){
    this.props.getArticles();
}
render(){
    console.log('is_auth',this.props.isAuthenticated);// console shows NULL
    if (!this.props.isAuthenticated) {
        return <Redirect to="/login" />;
      }
    return(
        <Fragment>
            <Articles data={this.props.articles}/>     
        </Fragment>
    )
  }
}
  const mapStateToProps = state =>({
articles: state.articleReducer.articles,
isAuthenticated: state.authReducer.isAuthenticated
})

 export default connect(mapStateToProps,{getArticles})(ArticleList);

Заранее спасибо!

1 Ответ

0 голосов
/ 11 марта 2019

ArticleList отображается даже раньше, чем isAuthenticated обновляется как true. Следовательно, перенаправление происходит каждый раз. Это может быть решено путем ожидания рендеринга основного маршрутизатора до завершения аутентификации. Например: 

function BaseRouter(props) {
  return !props.isLoading ? (
    <Router>
      <Route />
      <Route />
      <Route />
    </Router>
  ) : null;
}

const mapStateToProps = state => ({ isLoading: state.authReducer.isLoading });
export default connect(mapStateToProps)(BaseRouter);

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

...