Почему слетает авторизация после обновления страницы?

Question

[Олег Котов]

Есть приложение на React, с авторизацией и всеми делами. Почему-то вылетает авторизация при обновлении страницы.

Токен и таймаут сохраняю в localStorage. Туда при логине всё записывается корректно.
Исходя из этого, резонно подозреваю что прокосячился где-то при проверке. Но не могу понять где.

Вот authCheckState, которая по идее должна проверять данные из localStorage и если всё в порядке, инициализировать authSuccess с нужным токеном.

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) );
            }
        }
    }
}

Вот место, откуда она вызывается

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)
  }
}

Вот сама authSuccess

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

Ожидаю, что после обновления у меня будет AUTH_SUCCESS и токен в state. Но в итоге ничего не происходит. Redux-dev-tools показывает @@INIT и пустой state.

Answer 1

[Антон Спирин]

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

В вашем случае, mapDispatchToProps можно определять в виде объекта:

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

Comments

[Олег Котов]

Спасибо, помогло. А можно поинтересоваться что это изменило? Я весьма плох в js.

[Антон Спирин]

Олег Котов, в вызов dispatch надо передавать вызов asyncAction так же, как у вас они передаются в коде authCheckState. Вы передавали сам asyncAction без вызова.

Еще я длинную запись return на короткую заменил.

длинная:

const foo () => {
  return {};
};

короткая:
const foo () => ({});

Но в таких случаях, когда вызов action не надо как-либо модернизировать лучше использовать объект:

const mapDispatchToProps = {
  myActionName,
};