React Redux components not updating

Question

I am trying to implement auth (register / exit) using React + Redux (SSR and Thunks). I do not know why the components are not updated when updating the state of Redux ...

This is the component that needs to be rewritten:

class Navbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loggedIn: props.authentication.loggedIn
    };
  }

  render() {
    let links = null;
    if (this.state.loggedIn) {
      links = ...
    } else {
      links = ...
    }

    return (<Toolbar>{links}</Toolbar>)
  }
}

const mapStateToProps = state => {
  return {
    authentication: state.authentication
  }
}

const mapDispatchToProps = dispatch => {
  return {
    signOut: () => {dispatch(userActions.logout())}
  }
}

const AuthNavbar = connect(mapStateToProps, mapDispatchToProps)(Navbar)
export default AuthNavbar;

And this is my gearbox:

const reducers = {
  authentication,
  registration,
  alert
}

const todoApp = combineReducers(reducers)
export default todoApp

Authentication Reducer:

const authentication = (state = initialState, action) => {
  switch (action.type) {
    ...
    case userConstants.LOGIN_SUCCESS:
      return Object.assign({}, state, {
        loggedIn: true,
        loggingIn: false,
        user: action.user
      });
    ...
    default:
      return state;
  }
}

And Action - Input:

function login(email, password) {
  return dispatch => {
    dispatch({type: userConstants.LOGIN_REQUEST, email});
    userService.login(email, password).then(
        user => {
          dispatch({type: userConstants.LOGIN_SUCCESS, user});
        },
        error => {
          dispatch({ type: userConstants.LOGIN_FAILURE });
          dispatch({type: alertActions.error(error)});
        }
   );
  }
}

UserService.login is a function that calls api witch fetch as well. It seems that the action is being activated, as it should be, the Redux status is updated, but the component is not updated: Redux Dev Tools double checkbox - the status is updated, so there should be a problem with the way I use the connection utilities?

Answer 1

logedin constructor, .
, .

:

if (this.props.authentication.loggedIn) {
      links = ...  

componentWillReceiveProps

componentWillReceiveProps(nextProps){
  // update the state with the new props
  this.setState({
      loggedIn: nextProps.authentication.loggedIn
  });
}

Answer 2

render state.loggedIn, state.loggedIn ; this.props.authentication.loggedIn . . , :

class Navbar extends React.Component {
  render() {
    let links = null;
    if (this.props.authentication.loggedIn) {
      links = ...
    } else {
      links = ...
    }

    return (<Toolbar>{links}</Toolbar>)
  }
}