Как перенаправить после редукционного действия - PullRequest
Новая
       27

Как перенаправить после редукционного действия

0 голосов
/ 07 мая 2019

Мне интересно, каков наилучший способ перенаправления после обработки моего действия. После моего действия пользователь должен быть перенаправлен на '/login'.

Я использую библиотеку typesafe-actions со следующим кодом

Действие 

export const Logout = createStandardAction(
  AuthActionTypes.Logout
)<AuthStatus>()

Редуктор 

case getType(actions.Logout):
  return {
    ...state,
    verifyingTokenStatus: ProgressStatus.Uninitialized,
    tokenRefreshStatus: ProgressStatus.Uninitialized,
    authStatus: action.payload,
    tokenStatus: TokenStatus.Uninitialized,
    user: undefined,
    token: undefined,
  }

Передача действия моему компоненту 

const mapDispatchToProps = (dispatch: Dispatch) => ({
  logout: (authStatus: AuthStatus) => dispatch(Logout(authStatus))
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(({ children, authStatus, user, logout }: Layout & Props<Component>) => (
  <Layout className="layout" style={{ minHeight: '100vh' }}>
      <AuthTopMenu theme={'light'} mode={'horizontal'} user={user} logout={logout} />
  </Layout>
))

AuthTopMenu имеет компонент аватара, который получает действие выхода из системы 

const removeToken = ({ logout }: AvatarContentProps) => {
  const cookies = new Cookies();
  if (cookies.get('token')) {
    cookies.remove('token')
    logout(AuthStatus.isNotLoggedIn)
  } else {
    return null;
  }
}

const AvatarContent = (logout: AvatarContentProps) => {
  return (
    <div>
      <p style={{ margin: 0 }} onClick={() => removeToken(logout)} >
        <Icon type="logout" />
        Logout
    </p>
    </div>
  );
}

Я не уверен, что лучший способ обработки перенаправления после того, как мое действие было запущено. Я видел, что componentDidUpdate можно использовать для проверки, изменилось ли мое состояние вошедшего в систему пользователя, но мне было интересно, может ли мое действие позаботиться об этом?

1 Ответ

0 голосов
/ 07 мая 2019

Для перенаправления / перенаправления вам необходимо использовать компонент { withRouter } response-router-dom, который даст вашему компоненту доступ к props.history.Это необходимо для перенаправления с одного маршрута на следующий

В вашем AvatarContent: 

import { withRouter } from "react-router-dom"

const AvatarContent = withRouter((logout: AvatarContentProps) => {
  return (
    <div>
         // pass in history to callBack function
          <p style={{ margin: 0 }} onClick={() => removeToken(logout, props.history)} >
            <Icon type="logout" />
            Logout
        </p>
        </div>
      );
    })

   //give an additional argument to this function so it can take in history
    const removeToken = ({ logout }: AvatarContentProps, history) => {
      const cookies = new Cookies();
      if (cookies.get('token')) {
        cookies.remove('token')
        logout(AuthStatus.isNotLoggedIn)
        //make use of history object
        history.push("/login")
      } else {
        return null;
      }
    }
...