使用 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 重定向反应路由器的主要内容,如果未能解决你的问题,请参考以下文章