Question

login reducer可以正常工作，但是当我添加注销reducer时，它不起作用。

export const rootReducer = combineReducers({
    login: loginReducer,
    logout: logoutReducer
});

export const loginReducer = (state = initialState, { type, payload } :any) => {
  switch (type) {
    case "login":
      return {...state, token: payload};
    default:
      return state;
  }
};

如果登录成功，我将运行graphql突变，并返回一个令牌，该令牌使用redux存储。以后，此信息将用于进行私有路由等。

let submitForm = (email: string, password: string) => {
    setIsSubmitted(true);
    login({
      variables: {
        email: email,
        password: password,
      },
    })
      .then(({ data }: any) => {
        dispatch({ type: "login", payload: data.loginEmail.accessToken })

现在，我想添加注销减少器。如果要单击按钮，我要注销。如果将其放在rootReducer中，它将编译而不会出现错误。

const initialState = {
  token: null
};
const storeValue = store.getState();

export const logoutReducer = (state = initialState, { type, payload } :any) => {
switch (type) {
  case "check":
    return {...state, token: payload};
  default:
    return state;
}
};

但是，如果我使用state = storeValue而不是initialState，则在storeValue和logout的定义上会出错

'storeValue'/logout implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.ts(7022)

编辑：

这是我的privateRouting工作方式：

export const PrivateRoute = ({ component, ...rest }: any) => {
  const routeComponent = (props: any) => {
    if(store.getState().login.token) {
      return React.createElement(component, props)
    }
    else {
      return <Redirect to={{ pathname: '/404' }} />
    }
  }    
  return <Route {...rest} render={routeComponent} />;
};

我上面已经提到过如何在submitForm函数中存储令牌。以此为基础，我如何也可以使用相同的login减速器来实现注销？

<ExitToAppIcon onClick={logout}></ExitToAppIcon>

Answer 1

经过一番思考（尚未确定是否经过测试），我认为答案是否定的。您不能在reducer内使用getState（）。

据我所知，redux是如何工作的（可能是错误的，所以请自己仔细检查）-状态在所有reducer都首先被调用之后生成。因此，store.getState()可能是undefined在reducer首次运行之前。

由于要设置initialState-甚至无法做类似store.getState().keyYouAreLookingFor的事情才能在logoutReducer中使用它。

可以在reducer内使用getState（）吗？

1 个答案: