一旦用户访问另一条路线,如何清除 redux 状态?
Posted
技术标签:
【中文标题】一旦用户访问另一条路线,如何清除 redux 状态?【英文标题】:How to clear redux state once the user visit another route? 【发布时间】:2022-01-14 04:33:19 【问题描述】:我有以下问题:我有一个通用组件,其中包含来自 redux 存储的一些数据,我想在用户访问另一条路线时清除这些数据。
<Route path="/create/gallery" element=<CreatePage type=ContentType.gallery/> />
我还有一些代码可以将我输入的数据保存到商店
saveGeneralInfo = (field: string, value: string) =>
const data = ;
data[field] = value;
this.props.dispatch(saveGeneralInfo(data));
如果用户离开页面或访问任何其他链接,我如何清除状态? (例如来自标题)
if(this.state.keycloak)
if(this.state.authenticated) return (
<div className="App">
<Header/>
<Routes>
<Route path="/" element=<Content /> />
<Route path="/sites"/>
<Route path="/users"/>
<Route path="/create/gallery" element=<CreatePage type=ContentType.gallery/>/>
<Route path="/create/article" element=<CreatePage type=ContentType.article /> />
<Route path="/create/quiz" element=<CreatePage type=ContentType.quiz /> />
</Routes>
</div>
);
else return (
<div>Can't authorize</div>
)
【问题讨论】:
react-router-redux 提供了一个 LOCATION_CHANGE 动作。此处描述的类似问题***.com/questions/37911075/… 你已经尝试了什么?什么不工作? ***.com/help/minimal-reproducible-example 【参考方案1】:您必须提供在每个路由根组件中的 unMount
生命周期事件上触发的存储清除功能。
如果您使用的是功能组件:
export const Component = () =>
const dispatch = useDispatch();
useEffect(() =>
return () =>
dispatch(yourActionThatCleansReduxStore())
, [])
//rest of your code
在我的情况下,我为每个页面 URL 重置部分商店,例如商店看起来像 /info
或 /user
user:
id: ...
,
info: ...
【讨论】:
以上是关于一旦用户访问另一条路线,如何清除 redux 状态?的主要内容,如果未能解决你的问题,请参考以下文章