使用React-Router 4和Redux-Promise重定向用户

Question

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

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

我不知道如何使用上面的架构以编程方式重定向用户。我想在Action.js中做到这一点，但我觉得它只能在Reducers.js中完成。即使我甚至不知道该如何开始。

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

任何建议都会有所帮助。谢谢。

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

向您致敬，埃米尔

Answer 1

我可以看到处于Redux状态的isLoggedIn在以后可能有用(例如，您可以将所有应该只对登录用户可见的路由/页面包装在一个组件中，该组件检查此isLoggedIn并可能重定向到登录页面)，因此我不一定要在那里更改任何内容。

但是，如果您仍然想找到另一种解决方法，那么可以使用history.push(newUrl) or history.replace(newUrl)以编程方式进行重定向(无需呈现重定向组件)。但我不确定你会把它叫在哪里。在动作创建器中有副作用对我来说似乎没有那么奇怪，所以一种可能是这样做

import axios from 'axios';

// pushOnResolve would be something like () => push('mynew/url')
export function login(email, password, pushOnResolve) {
  const promise = axios.post('http://localhost:3114/api/users/authenticate';
  // it's possible to have several .then on a promise
  // so this shouldn't interfere with
  // the Redux-promise or the LOGIN_USER_FULFILLED reducer
  promise.then(pushOnResolve);

  return {
    type: 'LOGIN_USER',
    payload: promise, 
    {
      email,
      password,
    }),
  };
}