Why does authorization fail after page refresh?

Question

React

There is an application on React, with authorization and all the cases. For some reason, authorization crashes when the page is refreshed.
I save the token and timeout in localStorage. There at login everything is recorded correctly.
Based on this, I reasonably suspect that I messed up somewhere during the check. But I can't figure out where.
Here is authCheckState , which is supposed to check the data from localStorage and if everything is in order, initialize authSuccess with the desired token.

export const authCheckState = () => {
    return dispatch => {
        const token = localStorage.getItem('token');
        if (token === undefined) {
            dispatch(authLogout());
        } else {
            const expirationDate = new Date(localStorage.getItem('expirationDate'));
            if ( expirationDate <= new Date() ) {
                dispatch(authLogout());
            } else {
                dispatch(authSuccess(token));
                dispatch(checkAuthTimeout( (expirationDate.getTime() - new Date().getTime()) / 1000) );
            }
        }
    }
}

Here is the place where it is called from

class App extends Component {

  componentDidMount() {
    this.props.onTryAutoSignup();
  }

  render() {
      return (
        <div>
          <Router>
            <CustomLayout {...this.props}>
              <BaseRouter />
            </CustomLayout>
          </Router>
        </div>
      );
   }
}

const mapStateToProps = state => {
  return {
    isAuthenticated: state.token !== null
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onTryAutoSignup: () => dispatch(actions.authCheckState)
  }
}

Here is authSuccess itself

export const authSuccess = token => {
    return {
        type: actionTypes.AUTH_SUCCESS,
        token: token,
    }
}

I expect that after the update I will have AUTH_SUCCESS and a token in state. But in the end, nothing happens. Redux-dev-tools shows @@INIT and an empty state.

Answer 1

const mapDispatchToProps = dispatch => ({
  onTryAutoSignup: () => dispatch(actions.authCheckState()),
});

In your case, mapDispatchToProps can be defined as an object:

const mapDispatchToProps = {
  onTryAutoSignup: actions.authCheckState,
};