一旦用户访问另一条路线,如何清除 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 状态?的主要内容,如果未能解决你的问题,请参考以下文章

导航到另一条路线后如何使用 Provider?

在成功的异步 redux 操作上转换到另一条路线

如何以角度将数据从一条路线传输到另一条路线? [复制]

页面转换时清除 redux 状态

科尔多瓦相机在访问另一条路线后拍摄照片问题

如何将状态从一个反应路线传递到另一个反应路线?