title: Redux State not updating in the Redux DevTool
body: <p>When I click on a button, it dispatches a function that is meant to login a user and return the user's data. But the Redux store seems not to be updated after the dispatch. When I checked the Redux devtool, It shows that the actions are dispatching appropriately with their payloads but the state remains as the initial state, it doesn't get updated after each dispatched action. </p>
  
  <p>This images below display the action and state of the redux devtool.
  <a href="https://i.stack.imgur.com/mkw4m.png" rel="nofollow noreferrer">Dispatched actions</a><br></p>
  
  <p><a href="https://i.stack.imgur.com/fQvWS.png" rel="nofollow noreferrer">State display initial state</a><br></p>
  
  <p>I don't know I have done wrong, my code are as follows.</p>
  
  <p>userInitialState.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default {
    user: {},
    error: null,
    loading: false
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>userLoginAction.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import axios from 'axios';
  import * as types from './actionTypes';
  
  export const signInUserSuccess = payload =&gt; ({
    type: types.SIGNIN_USER_SUCCESS,
    payload
  });
  
  export const signingInUser = () =&gt; ({
    type: types.SIGNING_IN_USER
  });
  
  export const signInUserFailure = () =&gt; ({
    type: types.SIGNIN_USER_FAILURE
  });
  
  export const userSignIn = (data) =&gt; {
    const url = 'https://eventcity.herokuapp.com/api/v1/users/login';
    return (dispatch) =&gt; {
      dispatch(signingInUser());
      return axios({
        method: 'post',
        url,
        data
      })
        .then((response) =&gt; {
          const user = response.data;
          dispatch(signInUserSuccess(user));
        })
        .catch(() =&gt; {
          dispatch(signInUserFailure());
        });
    };
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>userLoginReducer.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as types from '../actions/actionTypes';
  import userInitialState from './userInitialState';
  
  const userReducer = (state = userInitialState, action = {}) =&gt; {
    switch (action.types) {
      case types.SIGNING_IN_USER:
        return {
          ...state,
          user: {},
          error: null,
          loading: true
        };
      case types.SIGNIN_USER_FAILURE:
        return {
          ...state,
          user: {},
          error: { message: 'Error loading data from the API' },
          loading: false
        };
      case types.SIGNIN_USER_SUCCESS:
        return {
          ...state,
          user: action.payload,
          error: null,
          loading: false
        };
      default:
        return state;
    }
  };
  
  export default userReducer;</code></pre>
  </div>
  </div>
  </p>
  
  <p>rootReducer.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { combineReducers } from 'redux';
  import userReducer from './userReducer';
  
  const rootReducer = combineReducers({
    userReducer
  });
  
  export default rootReducer;</code></pre>
  </div>
  </div>
  </p>
  
  <p>configureStore.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import { composeWithDevTools } from 'redux-devtools-extension';
  import rootReducer from '../reducer/rootReducer';
  
  const configureStore = () =&gt; createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));
  
  export default configureStore;</code></pre>
  </div>
  </div>
  </p>
  
  <p>SignInModal.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  class SignInModal extends Component {
    state = {
      username: '',
      password: ''
    };
    componentDidMount() {
      this.props.userSignIn({});
    }
    onUsernameChange = e =&gt; {
      const username = e.target.value;
      this.setState(() =&gt; ({
        username
      }));
    };
    onPasswordChange = e =&gt; {
      const password = e.target.value;
      this.setState(() =&gt; ({
        password
      }));
    };
    onSubmitForm = e =&gt; {
      e.preventDefault();
      const user = {
        username: this.state.username,
        password: this.state.password
      };
      this.props.userSignIn(user);
    };
  
    render() {
      console.log(this.props.user)
      return (
        &lt;div&gt;
          &lt;div
            className="modal fade"
            id="exampleModalCenter"
            tabIndex="-1"
            role="dialog"
            aria-labelledby="exampleModalCenterTitle"
            aria-hidden="true"
          &gt;
            &lt;div className="modal-dialog" role="document"&gt;
              &lt;div className="modal-content"&gt;
                &lt;div className="modal-header"&gt;
                  &lt;h5 className="modal-title" id="exampleModalLongTitle"&gt;
                    Sign In Form
                  &lt;/h5&gt;
                  &lt;button type="button" className="close" data-dismiss="modal" aria-label="Close"&gt;
                    &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="modal-body"&gt;
                  &lt;form onSubmit={this.onSubmitForm} id="signin"&gt;
                    &lt;div className="form-group"&gt;
                      &lt;label htmlFor="username"&gt;Username or Email&lt;/label&gt;
                      &lt;input
                        type="text"
                        className="form-control"
                        name="username"
                        placeholder="Username or email"
                        value={this.state.username}
                        onChange={this.onUsernameChange}
                      /&gt;
                    &lt;/div&gt;
                    &lt;div className="form-group"&gt;
                      &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                      &lt;input
                        type="password"
                        className="form-control"
                        placeholder="Password"
                        name="password"
                        value={this.state.password}
                        onChange={this.onPasswordChange}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div className="modal-footer"&gt;
                    &lt;button type="button" className="btn btn-secondary" data-dismiss="modal"&gt;
                      Close
                    &lt;/button&gt;
                    &lt;button type="submit" className="btn btn-primary" form="signin"&gt;
                      Save changes
                    &lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SignInModal;</code></pre>
  </div>
  </div>
  </p>
  
  <p>SignInModalContainer</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { connect } from 'react-redux';
  import { userSignIn } from '../actions/userLoginAction';
  import SignInModal from '../components/SignInModal';
  
  const mapStateToProps = state =&gt; ({
    user: state.userReducer
  });
  const mapDispatchToProps = dispatch =&gt; ({
    userSignIn: data =&gt; dispatch(userSignIn(data))
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(SignInModal);</code></pre>
  </div>
  </div>
  </p>