美文网首页
如何重置Redux存储的状态?

如何重置Redux存储的状态?

作者: 日不落000 | 来源:发表于2018-12-25 13:47 被阅读186次

    参考 http://www.coderlord.com/javascript/5/6/7/6540DE35624567.html

    关键代码

    我想指出Dan Abramov接受的评论是正确的,除非我们在使用react-router-redux软件包以及这种方法
    时遇到了一个奇怪的问题。我们的修复方法是不将状态设置为undefined但是而是仍然使用当前的路由
    减少器。所以如果你使用这个包,我建议你实施下面的解决方案
    
    
    const rootReducer = (state, action) => {
      if (action.type === 'USER_LOGOUT') {
        const { routing } = state
        state = { routing } 
      }
      return appReducer(state, action)
    }
    

    应用场景:
    用户退出登录,情况相关缓存数据。

    问题:
    我使用Redux进行状态管理。
    如何将存储重置为其初始状态?
    例如,假设我有两个用户帐户(u1和u2)。
    想象以下事件序列:

    用户u1登录到应用程序并执行某些操作,因此我们在存储中缓存一些数据。
    用户u1注销。
    用户u2登录到应用程序,而不刷新浏览器。

    在这一点上,缓存的数据将与u1关联,我想清理它。

    当第一个用户注销时,如何将Redux存储重置为其初始状态?

    最佳答案:
    一种方法是用手写一个根reducer。

    根reducer通常委托处理由combineReducers()生成的reducer的动作。但是,每当它接收到USER_LOGOUT操作时,它就会重新返回初始状态。

    例如,如果你的root reducer看起来像这样:

    const rootReducer = combineReducers({
      /* your app’s top-level reducers */
    })
    

    你可以将它重命名为appReducer并写一个新的rootReducer委托给它:

    const appReducer = combineReducers({
      /* your app’s top-level reducers */
    })
    
    const rootReducer = (state, action) => {
      return appReducer(state, action)
    }
    

    现在我们只需要教新的rootReducer在USER_LOGOUT操作后返回初始状态。正如我们知道的,reducers应该返回初始状态,当它们以undefined作为第一个参数被调用时,不管操作。让我们使用这个事实有条件地剥离累积状态,我们将它传递给appReducer:

     const rootReducer = (state, action) => {
      if (action.type === 'USER_LOGOUT') {
        state = undefined
      }
    
      return appReducer(state, action)
    }
    

    现在,每当USER_LOGOUT触发时,所有reducers都将重新初始化。他们也可以返回不同于他们最初想要的东西,因为他们可以检查action.type以及。

    重申,全新的代码如下所示:

    const appReducer = combineReducers({
      /* your app’s top-level reducers */
    })
    
    const rootReducer = (state, action) => {
      if (action.type === 'USER_LOGOUT') {
        state = undefined
      }
    
      return appReducer(state, action)
    }
    

    注意,我不是在这里改变状态,我只是reassigning the reference的一个局部变量,称为状态,然后传递给另一个函数。改变状态对象将违反Redux原则。

    翻译自:https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store
    转载注明原文:javascript – 如何重置Redux存储的状态?

    相关文章

      网友评论

          本文标题:如何重置Redux存储的状态?

          本文链接:https://www.haomeiwen.com/subject/cbhflqtx.html