reactjs - React Redux 在 axios 响应之前渲染应用程序

问题描述

我需要在渲染应用程序之前检查 auth staues

我像这样在 index.js 中运行操作：

import ReactDOM from 'react-dom';
import "bootstrap/dist/css/bootstrap.css";
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index';
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom';
import {authCheckStaut} from './store/actions/auth'

store.dispatch(authCheckStaut());

ReactDOM.render(
  <Provider store={store}>
  <BrowserRouter basename="/">
    <App />
  </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

reportWebVitals();

这是应用程序页面：

import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Switch, withRouter} from "react-router-dom";
import PrivateRoute from './routes/compoments/PrivateRoute'
import * as actions from '../src/store/actions/auth';




const Login = lazy(() => import("./users/components/login"));

const Signup = lazy(() => import("./users/components/signup"));

const Dashboard = lazy(() => import("./users/components/dashboard"));

const App = (props)=> {

    return (
      <Router>
        <Suspense fallback={<h1>Loading...</h1>}>
          <Switch>
              <Route exact path="/login" component={Login} />
              <Route exact path="/signup" component={Signup} />             
              <PrivateRoute exact path="/" component={Dashboard} auth={props.currentUser} />
          </Switch>
        </Suspense>
      </Router>
    );
  }


const mapStateToProps = state => ({ currentUser: state.auth });
export default withRouter(connect(mapStateToProps, actions)(App));

这是 PrivetRoute 页面：

import {Route, Redirect} from 'react-router-dom';

const PrivateRoute = ({component:Component,auth,...rest}) => {
    return (
    <Route 
        {...rest}
        render = {props =>{
            console.log('PR',auth)
            if(!auth.isAuthenticated){
                return <Redirect to={{
                    pathname: '/login',
                    state: { from: props.location }
                }}/>
            } else {
                return <Component {...props}/>
            }

        }}
    />
)};
  
export default PrivateRoute;

我做了一些控制台日志来跟踪我的应用程序

控制台日志

如您所见，他在渲染应用程序后更新了商店状态，因此即使它是有效令牌，它也将始终重定向到登录

标签： reactjsreact-reduxaxios

React 总是呈现应用的当前状态。你想要的是一些等待响应的初始状态。现在您的状态转换如下所示：

您想要的是三种状态，如下所示：

如何读取模式：

无处的箭头表示“初始”状态。状态在盒子里。从盒子到盒子的箭头是一个过渡。箭头附近有转换（事件）的名称。方括号表示“条件”（或转换保护）。只有条件为真时才会发生转换。

reactjs - React Redux 在 axios 响应之前渲染应用程序

问题描述

解决方案

推荐阅读