使用React路由器4和Redux承诺重定向用户

我有一个简单的用例，在React Router 4和Redux环境中似乎很难实现

当用户登录时，将触发redux承诺操作，该操作返回API令牌、到期日期和一些其他信息。当承诺兑现时，如果兑现，我会将用户重定向到另一个页面

我不知道如何使用上述体系结构以编程方式重定向用户。我想在Action.js中完成它，但它觉得它只能在Reducers.js中完成。尽管我甚至不知道如何开始

到目前为止，我找到的最好的方法是在我的视图中有一个重定向组件，并让promise将loggedIn状态设置为true，如果loggedIn属性在视图中为true，它将返回重定向属性，然后将用户重定向到所需页面。不知何故，对于一个简单的用例来说，这感觉像是有很多额外的代码

任何建议都会有帮助。多谢各位

Action.js：

import axios from 'axios';

export function login(email, password) {
  return {
    type: 'LOGIN_USER',
    payload: axios.post('http://localhost:3114/api/users/authenticate', 
    {
      email,
      password,
    }),
  };
}

Reducers.js

// Promise
// pending
// fulfilled
// rejected
const initalState = {
  token: null,
  expiryDate: '',
  loading: false,
  error: null,
};

// REDCUER
function loginReducer(state = initalState, action) {
  switch (action.type) {
    case 'LOGIN_USER_PENDING':
      return { ...state, loading: true };
    case 'LOGIN_USER_FULFILLED':
      return {
        ...state,
        loading: false,
        token: action.payload.data.token,
        expiryDate: action.payload.data.expires,
        loggedIn: true,
      };
    case 'LOGIN_USER_REJECTED':
      return { ...state, loading: false, error: `${action.payload}` };
    default:
      return state;
  }
}

export default loginReducer;

LoginView.js

render() {
        const { data, login, loggedIn } = this.props;
        if (data.loggedIn) {
          return <Redirect to="/users" push />;
        }
        return (
          ...
        )
       }

render（）{
const{data，login，loggedIn}=this.props；
if（data.loggedIn）{
返回；
}
返回(
...
)
}

问候,，

---

Emir

我可以看到在Redux状态下的

isLoggedIn

在以后可能会有用（例如，您可以在检查此

isLoggedIn

并可能重定向到登录页面的组件中包装所有应该只对登录用户可见的路由/页面），所以我不一定会改变那里的任何事情

但是，如果您仍然想找到另一种方法来解决这个问题，那么可以使用以下方法以编程方式重定向（无需呈现重定向组件）。但我不确定你会把它叫做什么。在action creator中产生副作用对我来说似乎比在reducer中产生副作用稍微不那么奇怪，所以一种可能是做类似的事情

从“axios”导入axios；
//pushOnResolve类似于（）=>push（'mynew/url'）
导出功能登录（电子邮件、密码、pushOnResolve）{
const promise=axios.post（'http://localhost:3114/api/users/authenticate';
//有可能会有几个。然后在一个承诺
//所以这不应该干扰到
//Redux承诺或登录用户
承诺。然后（pushOnResolve）；
返回{
键入：“登录用户”，
有效载荷：承诺，
{
电子邮件，
密码，
}),
};
}

我可以看到一个处于Redux状态的

isLoggedIn

在以后可能会有用（例如，您可以在一个组件中包装所有应该只对登录用户可见的路由/页面，该组件检查此

isLoggedIn

，并可能重定向到登录页面），所以我不一定会改变那里的任何事情

但是，如果您仍然想找到另一种方法来解决这个问题，那么可以使用以下方法以编程方式重定向（无需呈现重定向组件）。但我不确定你会把它叫做什么。在action creator中产生副作用对我来说似乎比在reducer中产生副作用稍微不那么奇怪，所以一种可能是做类似的事情

从“axios”导入axios；
//pushOnResolve类似于（）=>push（'mynew/url'）
导出功能登录（电子邮件、密码、pushOnResolve）{
const promise=axios.post（'http://localhost:3114/api/users/authenticate';
//有可能会有几个。然后在一个承诺
//所以这不应该干扰到
//Redux承诺或登录用户
承诺。然后（pushOnResolve）；
返回{
键入：“登录用户”，
有效载荷：承诺，
{
电子邮件，
密码，
}),
};
}

历史记录有什么进展吗？按我的建议推一下？@jonahe谢谢你的跟进。我会在一天内通知你。目前正在做3个项目，有点麻烦。历史方面有什么进展吗？按我的建议推动？@jonahe谢谢你的跟进。我会在一天内通知你。目前正在做3个项目，有点麻烦。