使用 redux-saga 重定向反应路由器

Posted

技术标签:

【中文标题】使用 redux-saga 重定向反应路由器【英文标题】:Redirect react router with redux-saga 【发布时间】:2019-12-30 11:16:11 【问题描述】:

我有 redux-saga,它应该在成功登录后将用户重定向到主页。我不使用react-router-redux 或类似的东西,所以我的路由器没有连接到状态。

这是我的登录组件

const AdminLogin: React.FC<RouteComponentProps> = (history) => 
    const [form, setForm] = useState(username: '', password: '');
    const user = useSelector(getAdminUser);
    const dispatch = useDispatch();
    const handleSubmit = (e: React.FormEvent<htmlFormElement>) => 
        e.preventDefault();
        dispatch(makeLoginAsync(form));
    ;

    useEffect(() => 
        if (user && user.token) 
            history.push('/admin/main'); // here it is
        
    , [user, history]);


    return (
        <form onSubmit=handleSubmit className="admin-login">
            // FORM HTML CODE
        </form>
    );
;

export default withRouter(AdminLogin);

请注意,我正在向 Action 发送表单,然后 Saga 正在监听我的 Action 并执行所有逻辑和效果。我认为在 Saga 代码中进行重定向会更好。但我做不到?

成功登录后,Reducer 更改状态设置用户身份验证令牌。如果我有令牌,我会把它当作用户登录并将他重定向到另一个页面。

如您所见,我直接在组件中实现了这个逻辑(使用 Selector)。但是我觉得很丑。

实际上,我只能在组件中访问history 对象(如果组件用withRouter 包装)。

如果我使用react-router-redux,我可以做类似的事情

import  push  from 'react-router-redux'

并使用push 函数从 Saga 重定向。我是 React 的新手,我听说将路由器连接到 redux 不是强制性的。此外,我不想让我的应用程序更复杂,并且有另一个依赖项来实现重定向等基本功能。

所以现在我必须让它变得更加复杂和隐含。也许我错过了什么?

欢迎任何帮助。

【问题讨论】:

“我不想让我的应用程序更复杂” 这就是为什么你应该使用react-router-redux 的原因。它将允许您在 redux 存储中拥有所有逻辑。 还要注意这个library is very compact。 4.1kB MINIFIED 和 1.4kB MINIFIED + GZIPPED。您不应该害怕将其添加为您的依赖项。 【参考方案1】:

通过 dispatch 事件传递历史,然后用它来推送 redux 中的路由

const AdminLogin: React.FC<RouteComponentProps> = (history) => 
    const [form, setForm] = useState(username: '', password: '');
    const user = useSelector(getAdminUser);
    const dispatch = useDispatch();
    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => 
        e.preventDefault();
        dispatch(makeLoginAsync(form,history));
    ;

    useEffect(() => 
        if (user && user.token) 
            history.push('/admin/main'); // here it is
        
    , [user, history]);


    return (
        <form onSubmit=handleSubmit className="admin-login">
            // FORM HTML CODE
        </form>
    );
;

export default withRouter(AdminLogin);

【讨论】:

以上是关于使用 redux-saga 重定向反应路由器的主要内容,如果未能解决你的问题,请参考以下文章

反应路由器 - 登录后重定向

反应路由器 - 登录后重定向

反应路由器身份验证重定向

使用反应路由器从主页重定向到特定页面后访问从 NavLink 传递的数据

反应路由器>重定向不起作用

反应路由器没有重定向到确切的网址