title: React redux redirect after success post
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>My Component works. It is LoginPage and I can confirm that when I click on the login button an action is called.</p>
  
  <pre><code>class LoginPage extends React.Component {
    render() {
      return (
        &lt;div id="login-container"&gt;
          &lt;LoginForm {...this.props} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
    };
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return {
      handleSubmit: (evt) =&gt; {
        evt.preventDefault();
  
        performLogin(dispatch, evt.target.username.value, evt.target.password.value );
      }
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
  </code></pre>
  
  <p>The performLogin method is an action and my actions.js looks like this:</p>
  
  <pre><code>export function performLogin( dispatch, username, password ) {
      login(username, password).then(function (response) {
          dispatch({
              type: LOGIN_SUCCESS
          });
      })
      .catch(function (error) {
          dispatch({
              type: LOGIN_FAILURE
          });
      });
  }
  </code></pre>
  
  <p>The reducer looks like this:</p>
  
  <pre><code>const loginReducer = (state = initialState, action) =&gt; {
      switch (action.type) {
          case LOGIN_SUCCESS:
              return [
                  ...state, {
                      auth: {
                          'login': true
                      }
                  }
              ]
          case LOGIN_FAILURE:
              return [
                  ...state, {
                      auth: {
                          'login': false
                      }
                  }
              ]
          default:
              return state;
      }
  };             
  </code></pre>
  
  <p>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. </p>
  
  <p>My question is where do you perform ajax calls and redirects in ReactJS/redux? In the action or the reducer?</p>
  
  <p>This is a part of my packages.json:</p>
  
  <pre><code>"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",
  </code></pre>