React redux redirect after success post

Question

I normally work as a Java programmer and I love the fact that with Java alot of the code design is standardized. For example you read Java example about Spring or Hibernate the code structurally looks the same for the whole world.

I am now working on ReactJS with redux and I just can't seem to understand it. Every example I have seen does everything completely different and it seams as if the entire JavaScript community just can't make up there minds on how to do something the same so I am hoping someone here can explain how ReactJS / redux works.

I have a login page and when I click on a button a http post must be done to a oauth2 auth server and on success a redirect must be done.

My Component works. It is LoginPage and I can confirm that when I click on the login button an action is called.

class LoginPage extends React.Component {
  render() {
    return (
      <div id="login-container">
        <LoginForm {...this.props} />
      </div>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleSubmit: (evt) => {
      evt.preventDefault();

      performLogin(dispatch, evt.target.username.value, evt.target.password.value );
    }
  }
}

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

The performLogin method is an action and my actions.js looks like this:

export function performLogin( dispatch, username, password ) {
    login(username, password).then(function (response) {
        dispatch({
            type: LOGIN_SUCCESS
        });
    })
    .catch(function (error) {
        dispatch({
            type: LOGIN_FAILURE
        });
    });
}

The reducer looks like this:

const loginReducer = (state = initialState, action) => {
    switch (action.type) {
        case LOGIN_SUCCESS:
            return [
                ...state, {
                    auth: {
                        'login': true
                    }
                }
            ]
        case LOGIN_FAILURE:
            return [
                ...state, {
                    auth: {
                        'login': false
                    }
                }
            ]
        default:
            return state;
    }
};

I have tried doing a axios post in the action but I got the error something like the action needs to be a plain object or something like that.

My question is where do you perform ajax calls and redirects in ReactJS/redux? In the action or the reducer?

This is a part of my packages.json:

"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.5.2",
"redux-form": "^6.8.0",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",

You should take a look at this link http://redux.js.org/docs/advanced/AsyncActions.html Normally async ajax request are perform in action! — Rajesh Dan, Jul 07 '17 at 09:22
Also please check this SO link https://stackoverflow.com/a/38537873/2293313 — Rajesh Dan, Jul 07 '17 at 09:23
@RajeshDan excellent links. That explains everything. Thanks :) — Martijn Hiemstra, Jul 07 '17 at 13:57

score 1 · Answer 1 · answered Jul 07 '17 at 09:26

1

Just use browserHistory.push("page-url"); method to change your route, after success promise

answered Jul 07 '17 at 09:26

Simonov Dmitry

457
2
6

score 0 · Answer 2 · answered Jul 07 '17 at 16:57

For the error "action needs to be a plain object or something like that" I believe your Redux-thunk is set up incorrectly. dispatch(performLogin(username, password))

export function performLogin( username, password ) { return function (dispatch) { return login(username, password) .then(function (response) { dispatch({ type: LOGIN_SUCCESS }); }) } }

See example makeASandwichWithSecretSauce https://github.com/gaearon/redux-thunk

React redux redirect after success post

2 Answers2