Question

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

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

我无法弄清楚如何使用上述架构以编程方式重定向用户。我想在Action.js中做到这一点，但感觉它只能在Reducers.js中完成。即使我不确定如何开始。

到目前为止，我发现的最好的方法是在我的视图中有一个Redirect组件，并将promise设置为loggedIn状态为true，如果在视图上的loggedIn prop为true，它将返回重定向prop，然后它将返回将用户重定向到所需的页面。不知怎的，这对于一个简单的用例来说就像是一些额外的代码。

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

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可能在以后有用（例如，您可以在检查此内容的组件中包装仅对于已登录用户可见的所有路由/页面{ {1}}并且可能会重定向到登录页面），所以我不一定会改变那里的任何内容。

但是如果您仍然希望找到另一种解决方法，那么可以使用history.push(newUrl) or history.replace(newUrl)以编程方式重定向（不渲染Redirect组件）。但是我不知道你会把它叫做什么。与在减速器中使用副作用相比，在动作创建器中具有副作用似乎稍微不那么奇怪，所以一种可能性可能是做类似的事情

isLoggedIn

使用React-Router 4和Redux-Promise

1 个答案: