React/Redux: redirect after loggin

Question

Am new to react/redux.I have a Redux action for authentication, and after that I need to redirect to a confirmation page home. I don't know how to redirect

this is my index.js

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import {loginAction} from './actions';


export class Login extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function

constructor(props) {
super(props);
this.state = {
  username: '',
  password: ''
};

// this.handleChange = this.handleChangeUsername.bind(this);
// this.handleSubmit = this.handleChangePassword.bind(this);
}

handleChangeUsername(event) {
 console.log(event.target.value);
 this.setState({username: event.target.value});
 console.log(this.state.username)
}
handleChangePassword(event) {
 this.setState({password: event.target.value});
 console.log(this.state.password)
}

 handleSubmit(event) {

this.props.dispatch(loginAction(this.state));
event.preventDefault();
}
render() {
return (
  <div>

  <div className="loginColumns animated fadeInDown">
    <div className="row">

        <div className="col-md-6">

        </div>
        <div className="col-md-6">
            <div className="ibox-content">
                <form className="m-t" role="form" onSubmit={this.handleSubmit.bind(this)}>
                    <div className="form-group">
                        <input type="email" value={this.state.username} onChange={this.handleChangeUsername.bind(this)} className="form-control" placeholder="Username" required="" />
                    </div>
                    <div className="form-group">
                        <input type="password" value={this.state.password} onChange={this.handleChangePassword.bind(this)} className="form-control" placeholder="Password" required="" />
                    </div>
                    <button type="submit" className="btn btn-primary block full-width m-b">Login</button>

                    <a href="#">
                        <small>Forgot password?</small>
                    </a>
                </form>
            </div>
        </div>
    </div>
    <hr/>
    <div className="row">
        <div className="col-md-6">
            Copyright Example Company
        </div>
        <div className="col-md-6 text-right">
           <small>© 2014-2015</small>
        </div>
    </div>
</div>

  </div>
);
}
}

Login.propTypes = {
 dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
 // Login: makeSelectLogin(),
});

function mapDispatchToProps(dispatch) {
 return {
 dispatch,
 };
}

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

action.js

import {
  DEFAULT_ACTION,
  LOGIN_ACTION
} from './constants';

export function defaultAction() {
 return {
   type: DEFAULT_ACTION,
  };
}

export function loginAction(json) {
  return {
    type: LOGIN_ACTION,
    json
  };
}

reducer.js

import { fromJS } from 'immutable';
import {
  DEFAULT_ACTION,
  LOGIN_ACTION
} from './constants';

const initialState = fromJS({
    status: false
});

function loginReducer(state = initialState, action) {
    console.log("action", action)
  switch (action.type) {
    case DEFAULT_ACTION:
      return state;

    case LOGIN_ACTION: 
        return _testFunction(state,action.json);
        default:
      return state;
  }
}

function _testFunction(state, json) {
    if(json.username == "abcd@gmail.com" && json.password == "1234")
    return state.set("status", true)
}

export default loginReducer;

i want to redirect /home after successful login. how can i redirect?

assuming you are already using react-router, this should help https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 — Shubham Khatri, Jul 10 '17 at 13:14

score 0 · Answer 1 · answered Jul 10 '17 at 14:15

Well, what you have to do is something like this. Pass a callback to your action. Once action completed it work, merely invoke that callback, which will programmatically redirect you to the url you need. Upon the submission of the login form pass the input values with the callback function to your action like this.

  onSubmit(values) {
    this.props.loginAction(values, () => {
      this.props.history.push('/');
    });
  }

Then in your action, if you are calling a backend API, when the promise is resolved make sure you invoke the callback function that gets passed in to the action like this.

  export function loginAction(values, callback) {
  const request = axios.post(`/endpoint`, values)
    .then(() => callback());

  return {
    type: LOGIN,
    payload: request
  };
}

This is all what you have to do. It is up to you to make slight alterations to this depending on your scenario and setup. I'll keep it for you as an exercise. Hope this helps. Happy Coding !

React/Redux: redirect after loggin

1 Answers1