Question

我在redux存储中的初始状态是

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;

一切正常，但是当我在浏览器中重新加载组件时，尽管redux开发工具显示用户已加载并且 isAuthenticated：true ，但我立即将其重定向到组件。我的问题是：我如何在render（）函数之前加载我的redux存储区？还是有其他想法可以使其正常工作？

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

先谢谢您！

Answer 1

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

这将阻止所有路由，直到完成身份验证检查为止。如果您需要启用一些不需要身份验证的路由，请应用条件渲染。

在渲染组件React，Redux之前从API获取数据

1 个答案: