Частный маршрут с Redux и реагирующим маршрутизатором - PullRequest
Новая
       98

Частный маршрут с Redux и реагирующим маршрутизатором

0 голосов
/ 08 мая 2020

У меня есть простое приложение с аутентификацией и частным маршрутом, я хочу получать данные с сервера, если у пользователя есть токен, серверная часть готова и работает нормально, и я вхожу в систему, у меня есть данные о пользователе в сокращении, но я не знаю, как чтобы обработать страницу refre sh, где мне делать dispath для вызова действия? если я делаю это в privateRoute. js, он работает странно, я хочу вызвать серверные, но я делал это 3-4 раза.

вот мои компоненты без вызова sessionActions, sessionActions должны обновлять loggedIn и user будет go на / страницы входа

PrivateRoute 

import React, { useState, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import  sessionAction  from '../store/actions/sessionAction';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { path, dispatch, loggedIn } = rest;
  });

  return (
    <Route
      path={path}
      render={(props) => (loggedIn ? <Component {...props} />
     <Component {...props}/>
        : (<Redirect to="/login" />))}
    />
  );
};

PrivateRoute.propTypes = {
  component: PropTypes.func.isRequired,
};
export default PrivateRoute;

sessionAction 

const sessionAction = (path) => (dispatch) => {
  return sessionServices(path)
    .then((response) => {
      console.log(response);
      const { data } = response;
      if (!data.error) {
        dispatch(success(data));
      }
      dispatch(failure(data.error.text));
    })
    .catch((error) => error);
};

sessionService 

import axios from 'axios';

axios.defaults.withCredentials = true;

const sessionServices = (path) => axios({
  method: 'post',
  url: `http://localhost:4000/api/pages${path}`,
})
  .then((response) => response)
  .catch((error) => console.log(error));

export default sessionServices;

1 Ответ

0 голосов
/ 08 мая 2020

Вы должны отправить действия для получения пользовательских данных с сервера в вашем компоненте приложения, который является компонентом верхнего уровня. Также поддерживайте состояние загрузки в reducer для рендеринга Loader до тех пор, пока не будут получены пользовательские данные. 

const App = props => {
    useEffect(() {
      this.props.sessionActions('/session')
    }, []);
    if(this.state.isLoading) return <Loader />;
    const { loggedIn, user } = this.props;
    return (
      <Router>
         {/* Your Private routes and otehr routes here */}
      </Router>
    )

}

const mapStateToProps = (state) => {
   return {
      isLoading: state.auth.isLoading,
      user: state.auth.user,
      loggedIn: state.auth.loggedIn
   }
}
export default connect(mapStateToProps, { sessionAction })(App);
...