一旦用户访问另一条路线，如何清除 redux 状态？

Posted 2023-02-19

【中文标题】一旦用户访问另一条路线，如何清除 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: ...