CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-form
FacundoGFlores
FacundoGFlores

Reputation: 8108

Can not see updated state

I have the following action:

export function loginUserRequest() {
  console.log('ACTION CALLED');
  return {
    type: LOGIN_USER_REQUEST,
  };
}

and this is the reducer:

export default function loginReducer(state = initialState, action) {
  switch (action.type) {
    case LOGIN_USER_REQUEST:
      console.log('REDUCER CALLED');
      return Object.assign({}, state, {
        isAuthenticated: true,
        isAuthenticating: true,
        statusText: null,
      });
    default:
      return initialState;
  }
}

Then, my component:

class Login extends React.Component {

  goHome = () => {
    browserHistory.push('/');
  }

  handleSubmit = (values) => {
    console.log(this.props.isAuthenticating);
    this.props.actions.loginUserRequest();
    console.log(this.props.isAuthenticating);
  }

  render() {
    return (
      <LoginForm onSubmit={this.handleSubmit} />
    );
  }
}

Login.propTypes = {
  actions: PropTypes.objectOf(PropTypes.func).isRequired,
  isAuthenticating: PropTypes.bool.isRequired,
};

const mapStateToProps = state => ({
  token: state.login.token,
  isAuthenticated: state.login.isAuthenticated,
  isAuthenticating: state.login.isAuthenticating,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(actionCreators, dispatch),
});

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

LoginForm is a redux-form component.

So, the expeted ouput from the handleSubmit function is:

false
ACTION CALLED
REDUCER CALLED
true

but it is giving me:

false
ACTION CALLED
REDUCER CALLED
false

But in the redux dev tool I can see the diff in LOGIN_USER_REQUEST:

enter image description here

Why I don't see it inside the handleSubmit function? Is it something related to redux-form library?

Extra info:

Added shouldComponentUpdate and logger

shouldComponentUpdate = (nextProps, nextState) => {
    console.log('Should component update called');
    if (this.props.isAuthenticating !== nextProps.isAuthenticating) {
      console.log('distntict');
      return true;
    }
    console.log('false');
    return false;
  }

enter image description here enter image description here

Upvotes: 1

Views: 48

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281646

You are getting such a result because of async nature of Javascript. So in your code

handleSubmit = (values) => {
    console.log(this.props.isAuthenticating);
    this.props.actions.loginUserRequest();
    console.log(this.props.isAuthenticating);
  }

First, you are printing the value of prop, and then the action gets called but before the action returns a response with the updated state, your third statement gets called to log the value and since the state is not yet updated you see the same result.

One approach will be have callbacks but that doesn't seem to be a requirement for your case. If your want to log the state then you can do so in componentWillReceiveProps function

like

componentWillReceiveProps(nextProps) {
     if(this.props.isAuthenicating != nextProps.isAuthenticating) {
          console.log(nextProps.isAuthenticating);
     }
}

I hope it helps

Upvotes: 1

Related Questions