Getting data from API before rendering component React, Redux

Question

My initialstate in redux store is

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


}

My app component looks like:store.dispatch(loadUser()); check the token of local storage and load user from API if token is exists and correct.

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

export default App;

everything works fine, but when I reload component in browser it immediately redirect me to component, despite the redux dev tools shows that user is loaded and isAuthenticated:true.My question is : How I can load my redux store before render() function?? Or is there any other ideas to make it work correctly??

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);

Thank you in advance!

I assume that the isAuthenticated property in your Redux store is not synced with the localStorage ? So if you reload the page, it will take the value in the default state, which is null — Arnaud Christ
– Arnaud Christ, Commented Mar 11, 2019 at 15:44

Easwar · Accepted Answer · 2019-03-11 15:47:52Z

1

ArticleList is being rendered even before isAuthenticated is updated as true. Hence the redirection is happening everytime. This can be solved by waiting the main router's render until authentication is complete. Eg :

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

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

This will block all routes till authentication check is complete. If you need to enable some routes which do not require authentication, apply conditional render.

answered Mar 11, 2019 at 15:47

Easwar

5,4821 gold badge14 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting data from API before rendering component React, Redux

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related