帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:Store  Persist  RED  
persist and rehydrate a redux store

  • 源代码名称:redux-persist
  • 源代码网址:http://www.github.com/rt2zz/redux-persist
  • redux-persist源代码文档
  • redux-persist源代码下载
  • Git URL:
    git://www.github.com/rt2zz/redux-persist.git
  • Git Clone代码到本地:
    git clone http://www.github.com/rt2zz/redux-persist
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/rt2zz/redux-persist
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Redux保留

    保存和冻结图例存储库。

    build statusnpm versionnpm downloads

    快速入门

    npm install redux-persist

    用法示例:

    基本用法包括在设置中添加 persistReducerpersistStore 。 每个应用程序需要多少来决定需要多少级别的状态。 默认值为 1级。 请阅读状态协调器文档了解更多信息。

    // configureStore.jsimport { createStore } from'redux'import { persistStore, persistReducer } from'redux-persist'importstoragefrom'redux-persist/lib/storage'// defaults to localStorage for web and AsyncStorage for react-nativeimportrootReducerfrom'./reducers'constpersistConfig= {
     key:'root',
     storage,
    }constpersistedReducer=persistReducer(persistConfig, rootReducer)exportdefault () => {
     let store =createStore(persistedReducer)
     let persistor =persistStore(store)
     return { store, persistor }
    }

    如果你正在使用响应,请将你的root 组件包装为 PersistGate 。 这样会延迟应用程序的UI呈现,直到检索到持久化状态并保存到 redux 。 注释PersistGate 加载prop可以为空,或者任何响应实例,比如 loading={<Loading/>}

    import { PersistGate } from'redux-persist/integration/react'//.. . normal setup, create store and persistor, import components etc.constApp= () => {
     return (
     <Provider store={store}><PersistGate loading={null} persistor={persistor}><RootComponent /></PersistGate></Provider> );
    };

    API

    完整API插件

    persistReducer(config, reducer)
    • 实参
      • 配置对象
        • 必需的配置:key, storage
        • 值得注意的其他配置: whitelist, blacklist, version, stateReconciler, debug
      • function function function 。
        • 任何减速器都可以工作,通常是由 combineReducers 返回的顶级减速器
    • 返回增强型减速器
    persistStore(store, [config, callback])
    • 实参
      • 存储 redux存储存储存储保存。
      • config配置对象( 通常为 null )
      • rehydration完成后将调用 callback功能
    • 返回 persistor 对象
    persistor object
    • persistor对象由persistStore返回,其中包含以下方法:
      • .purge()
        • 从磁盘清除状态并返回 promise
      • .flush()
        • 立即将所有挂起状态写入磁盘并返回 promise
      • .pause()
        • 暂停持久性
      • .persist()
        • 恢复持久性

    状态协调器

    状态reconcilers定义传入状态与初始状态的合并方式。 选择合适的状态协调器是非常重要的。 有三个选项可以以从框中发出,让我们看看每个操作的操作方式:

    • hardSet ( import hardSet from 'redux-persist/lib/stateReconciler/hardSet' ) 这将硬设置传入状态。 如果你在减速器树中嵌套了 persistReducer,或者你不依赖于减速器,那么这可能是理想的。
    • 进入状态: { foo: incomingFoo }
    • 初始状态: { foo: initialFoo, bar: initialBar }
    • 协调状态: { foo: incomingFoo } //便笺栏已经被删除
    • autoMergeLevel1 ( 默认值) 这将自动合并一个级别。 自动合并意味着在减水操作过程中,减速器的某一部分被修改,它会跳过这个状态。 级别 1表示将浅合并 1级深度。
    • 进入状态: { foo: incomingFoo }
    • 初始状态: { foo: initialFoo, bar: initialBar }
    • 协调状态: { foo: incomingFoo, bar: initialBar } //注释incomingFoo覆盖 initialFoo
    • autoMergeLevel2 ( import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2' ) 这就像autoMergeLevel1一样,除了它浅合并两个级别
    • 进入状态: { foo: incomingFoo }
    • 初始状态: { foo: initialFoo, bar: initialBar }
    • 协调状态: { foo: mergedFoo, bar: initialBar } //注释:initialFoo和incomingFoo是浅合并
    示例
    importhardSetfrom'redux-persist/lib/stateReconciler/hardSet'constpersistConfig= {
     key:'root',
     storage,
     stateReconciler: hardSet,
    }

    集成

    Redux持久化船舶,将它的作为 conveinence 。 PersistGate 组件是延迟呈现直到持久性完成的推荐方法。 它在以下两种模式中工作:

    • loading 工具栏:提供的加载值将被呈现,直到持久性完成,才能呈现点子。
    • 函数 childen: 函数将用一个 bootstrapped 参数来调用。 当引导为 true 时,持久化是完整的,并且可以安全地呈现完整的应用程序。 这对于添加过渡动画很有用。

    黑名单&白名单

    按示例:

    // BLACKLISTconstpersistConfig= {
     key:'root',
     storage: storage,
     blacklist: ['navigation'] // navigation will not be persisted};// WHITELISTconstpersistConfig= {
     key:'root',
     storage: storage,
     whitelist: ['navigation'] // only navigation will be persisted};

    嵌套保持

    嵌套持久化对于包括不同的存储适配器。代码拆分或者深入过滤很有用。 例如,黑名单和白名单只工作一级,但我们可以以使用嵌套的持久性来黑名单:

    import { combineReducers } from'redux'import { persistReducer } from'redux-persist'importstoragefrom'redux-persist/lib/storage'import { authReducer, otherReducer } from'./reducers'constrootPersistConfig= {
     key:'root',
     storage: storage,
     blacklist: ['auth']
    }constauthPersistConfig= {
     key:'auth',
     storage: storage,
     blacklist: ['somethingTemporary']
    }constrootReducer=combineReducers({
     auth:persistReducer(authPersistConfig, authReducer),
     other: otherReducer,
    })exportdefaultpersistReducer(rootPersistConfig, rootReducer)

    迁移

    persistReducer 具有一般的"迁移"配置,将在获取存储状态之后调用,但在实际调整与减速器之前。 它可以是任何接受状态作为参数并返回返回新状态对象的承诺的函数。

    Redux持久化带有 createMigrate的ship,它帮助创建同步迁移,以便从任何版本的存储状态转移到当前状态版本。 [Additional information]

    转换

    转换允许你定制持久化和rehydrated的状态对象。

    有几个库处理转换的一些常见实现。

    当状态对象被持久化时,它首先被 JSON.stringify() 序列化。 如果状态对象的部分不能映射到JSON对象,序列化过程可能会以意想不到的方式将你的状态部分转换为。 例如 javascript 设置的类型在JSON中不存在。 试图通过 JSON.stringify() 序列化某个集合时,它将被转换为空对象。 可能不是你想要的。

    下面是一个将集合属性持久化的转换,它将它的转换为 array 并返回。 通过这种方式,集合被转换为 array,这是JSON中的一个识别数据结构。 当从持久存储区提取出来时,array 将转换回一个集合,然后再保存到redux存储。

    constmyTransform=createTransform(
     // transform state on its way to being serialized and persisted. (inboundState, key) => {
     // convert mySet to an Array.return { ...inboundState, mySet: [...inboundState.mySet] };
     },
     // transform state being rehydrated (outboundState, key) => {
     // convert mySet back to a Set.return { ...outboundState, mySet:newSet(outboundState.mySet) };
     },
     // define which reducers this transform gets called for. { whitelist: ['someReducer'] }
    );

    createTransform函数接受三个参数。

    • 在保持状态之前调用的"入站"函数。
    • 一个"出站"函数,它在状态为rehydrated之前被调用。
    • 配置。

    存储引擎



    文章标签:RED  Store  Persist  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语