React ,Redux && auth?

Question

[acorn]

Хари Кришна!
Пишу приватный роутинг, использую react-route4.Работает на половину, скрывает компонент, но не показывает login form.
Я не совсем понимаю как передать из store значение моего auth в PrivateRoute компонент?

часть кода action/reducer login

const AUTH = 'AUTH';
export const auth = isAuth => ({
        type: AUTH,
        isAuth
});
//actions with auth
export function authenticated (username,password){
    return dispatch => {
        dispatch(auth(false));
        sendRequestAuth(username, password)
            .then(success =>{
                dispatch(auth(true));
            })
            .catch(err=>{
                dispatch(auth(false));
            });
    }
}

function sendRequestAuth (username,password) {
    return new Promise ((resolve, reject) => {
        setTimeout(()=>{
            if (username === "admin" && password === "admin"){
                return resolve(true)
            } else {
                return reject(new Error('Sorry, you are not admin ' ))
            }
        },1000);
    });
}
export default function loginReducer (state = {
    isAuth: false,
}, action){
    switch (action.type){
        case AUTH:
            return {
                ...state,
                isAuth: action.isAuth
            };
}

часть кода компонента Login

lass Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username:'',
            password:'',
            redirectToReferrer: false
        };
        this.onSubmit = this.onSubmit.bind(this);
    };
    onSubmit =(e) =>{
        e.preventDefault();
        let { username, password }=this.state;
        this.props.login(username,password);
        this.props.authenticated(username,password);
        this.setState({
            username: '',
            password: '',
        });
      <i>  if( this.props.authenticated === true){
            this.setState({
                redirectToReferrer: true</i>
            });
        }
    };

    render(){
        const { from } = this.props.location.state || { from: { pathname: "/" }};
        const { username, password,redirectToReferrer } = this.state;
        if(redirectToReferrer){
            return <Redirect to={from}/>
        }
        return (
            <div className="form-login"  >
              <form name ="loginForm" onSubmit={this.onSubmit}>
               </form>
            </div>
    )}
}

const mapStateToProps = (state)=>{
 return {  isAuth: state.isAuth};};
const mapDispatchToProps = (dispatch) => {
    return {
        login: (username, password) => dispatch(login(username,password)),
        authenticated: (username, password) => dispatch(authenticated(username,password))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

часть кода PrivateRoute

const PrivateRoute = ({ component: Component, ...rest })=>(
    <Route {...rest} render={(props) => (
    ??????????????????????????????????????????????///
            ? <Component {...props} />
            : <Redirect to='/login' />
        )}
    />
);

const mapStateToProps = (state)=>{
    return {
        isAuth: state.isAuth
    };
};
const mapDispatchToProps = (dispatch) => {
    return {
        authenticated: (username, password) => dispatch(authenticated(username,password))
    }
};
export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute) ;

Comments

[Роман Александрович]

папробуйте так

const PrivateRoute = ({ component: Component, ...rest })=>(
    <Route {...rest} render={(props) => (
   props.isAuth!==undefined &&props.isAuth ===true
            ? <Component {...props} />
            : <Redirect to='/login' />
        )}
    />
);

[Антон Спирин]

Роман Александрович, откуда в stateless functional component взяться this.props?

Условие:

isAuth !== undefined && isAuth === true ? /* do something */ : /* do something other */;

можно заменить на:

isAuth ? /* do something */ : /* do something other */;

[Антон Спирин]

Роман Александрович, так тоже не будет работать. Откуда в свойствах переданного компонента взяться свойству isAuth если оно передается компоненту PrivateRoute, а дальше зачем-то в Route? Route передаст компоненту только те свойтсва, которые прописаны в реализации библиотеки:

const props = { match, location, history, staticContext };
if (render) return match ? render(props) : null;

[Роман Александрович]

Антон Спирин,
ага понял учту

Answer 1

[Антон Спирин]

const PrivateRoute = ({ component: Component, isAuth, ...rest }) => (
  <Route {...rest} render={props => (isAuth
      ? <Component {...props} />
      : <Redirect to='/login' />
    )}
  />
);

const mapStateToProps = state => ({
  isAuth: state.isAuth,
});

const mapDispatchToProps = {
  authenticated,
};

export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute);

Comments

[acorn]

спасибо за ответ!а вот еще вопрос, есть из документации redirectToReferrer , которые меняет значение,если юзер авторизовался или нет. Я не совсем понял, куда мне его вписать, если я обрабатываю в reducer loginsuccess и auth , то значение redirectToReferrer должно быть там и меняться там же? и как мне потом его потом передать в компонент через
props?

[Антон Спирин]

acorn, ваш isAuth это и есть аналог redirectToReferrer. Это просто свойство из примера. Оно не является частью API роутера.

[acorn]

спасибо, а как его передать в компонент Login.js в render?
render( ){
const { from } = this.props.location.state || { from: { pathname: "/" }};
if (isAuth) {
return
}
return (..form..)
}
если я пишу this.state.isAuth, то ошибка Cannot read property 'state' of undefined

[Антон Спирин]

acorn, код компонента сбросьте.

[acorn]

Login.js

import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link, Redirect, withRouter} from "react-router-dom";
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import { getTranslate, getActiveLanguage } from 'react-localize-redux'
import { connect } from 'react-redux';
import { authenticated  } from '../reducers/login-reducer';
import { auth  } from '../reducers/login-reducer';
import { login } from '../reducers/login-reducer';
import { browserHistory } from 'react-router'


class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username:'',
            password:''
        };
        this.onSubmit = this.onSubmit.bind(this);
    };
    onSubmit =(e) =>{
        e.preventDefault();
        const { username, password } = this.state;
        this.props.login(username,password);
        this.props.authenticated(username,password);
        this.setState({
            username: '',
            password: ''
        });
    };

    render(){
        const { username, password } = this.state;
????
        const { from } = this.props.location.state || { from: { pathname: "/" } };
        const { isAuth } =this.state;

        if (  this.props.authenticated()) {return <Redirect to={ from } />;}
????
        return (
            <div className="form-login"  >
                <h1><b>Sisäänkirjautuminen</b></h1>
                <h3>Kirjaudu sisään antamalla käyttäjätunnus ja salasana.</h3>
                <form name ="loginForm" onSubmit={this.onSubmit}>
                    <TextField
                            name="username"
                            type="text"
                            onChange={e =>this.setState({username: e.target.value})}
                            value={username}
                            fullWidth={true}   />
                    <TextField
                            name="password"
                            type="password"
                            onChange={e =>this.setState({password: e.target.value})}
                            value={password}
                            fullWidth={true}/>
                    <br/>
                    <RaisedButton label="Login" type="submit"/>
                </form>
            </div>
        )
    }
}

const mapStateToProps = (state)=>{
 return {
     isLoginPending: state.isLoginPending,
     isLoginSuccess: state.isLoginSuccess,
     isLoginError: state.isLoginError,
     isAuth: state.isAuth
 };
};
const mapDispatchToProps = (dispatch) => {
    return {

        login: (username, password) => dispatch(login(username,password)),
        authenticated: (username, password) => dispatch(authenticated(username,password))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);

[Антон Спирин]

acorn, так вы же передаете isAuth в компонент через connect. Значение попадает в this.props.
Даже функция называется mapStateToProps.

Оформляйте mapStateToProps в короткой записи:

const mapStateToProps = state => ({
  isLoginPending: state.isLoginPending,
  isLoginSuccess: state.isLoginSuccess,
  isLoginError: state.isLoginError,
  isAuth: state.isAuth,
});

Так гораздо читаемей.

В mapDispatchToProps нет никакого смысла передавать функцию с dispatch, если передавать AC объектом, connect сам вызовет на нем bindActionCreators. Записывайте mapDispatchToProps так:

const mapDispatchToProps = {
  login,
  authenticated,
};

Такая форма записи очень небрежна:

const { username, password } = this.state;
const { from } = this.props.location.state || { from: { pathname: "/" } };
const { isAuth } =this.state;
if (  this.props.authenticated()) {return <Redirect to={ from } />;}

И выглядит некрасиво и читается плохо. Поправьте так:

const {
  authenticated,
  isAuth,
  location: {
    state: {
      from = { pathname: '/' },
    },
  } = this.props;
  const { username, password } = this.state;

  if (authenticated()) return <Redirect to={from} />;

[acorn]

Антон Спирин,спасибо, подправил код .
есть ошибка TypeError: Cannot read property 'state' of undefined.

[Антон Спирин]

acorn, а вы уверены, что у вас всегда приходит свойство this.props.location?

[Антон Спирин]

acorn, onSubmit у вас inline class arrow function, но зачем-то биндится в конструкторе.
Либо биндьте и измените на class method:

lass Login extends Component {
  constructor(props) {
    super(props);
     // ...your code
    this.onSubmit = this.onSubmit.bind(this);
  };
  
  onSubmit(e) {
     // ...your code
  }
}

Либо уберите бинд из конструктора. Сейчас он не нужен.

[acorn]

Антон Спирин, да, проблема в нем, видимо с history что-то пошло не так