npm 包 redux-persist-react-native-fs 使用教程

阅读时长 5 分钟读完

简介

redux-persist-react-native-fs 是一个用于 React Native 应用中,对 redux 进行状态持久化的 npm 包。它使用 React Native 的文件系统(rn-fs)来持久化 redux store,并提供了接口来访问持久化的数据。

安装

使用

在入口文件(例如 index.js)中,进行初始化:

-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- -------------------------------------
------ -------------- ---- -------------------
------ --- ---- --------

----- - ---------- ----- - - -----------------

------ ------- ----- ---- ------- --------------- -
  -------- -
    ------ -
      --------- --------------
        ------------ -------------- ----------------------
          ---- --
        --------------
      -----------
    --
  -
-

在 configureStore.js 中进行 store 的创建和配置:

-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ - --------------- ------------ - ---- ----------------
------ - ------------ - ---- ---------------
------ -------------------------- ---- --------------------------------

------ ----------- ---- -------------

----- ------- - -----------------------------
----- ------------- - -
  ---- -------
  --------
  ---------- -------- --------- -- ------ -------
--
----- ---------------- - ----------------------------- -------------

------ ------- -------- ---------------- -
  ----- ---------------- - ---------------
  ----- ----- - ------------
    -----------------
    ----------------------------------
  --
  ----- --------- - --------------------
  ------ - ---------- ----- --
-

这个示例代码中,createReactNativeFsStorage 导入了 redux-persist-react-native-fs,通过它创建一个 storage 对象,作为 redux-persist 的配置项。该 storage 支持 react-native-fs 提供的文件系统 API。

持久化的数据访问

在 App.js 中,可以通过 redux 的 connect 函数,将被持久化的状态作为 props 传递给组件:

-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ - ------- - ---- --------------

----- --- ------- --------------- -
  -------- -
    ----- - ---- - - -----------
    ------ -
      ------
        ------ ----------------
      -------
    --
  -
-

----- --------------- - ----- -- --
  ----- -----------
---

------ ------- ------------------------------

其中,mapStateToProps 函数描述了需要获取的持久化状态。这里的 user 是一个对象,它包含了用户信息,在 store 中属于一个 reducer 的 state。

小结

redux-persist-react-native-fs 提供持久化 redux store 的功能,以及访问持久化数据的接口。通过它的使用,可以避免在应用重新启动时,丢失用户在应用中的状态信息,提高用户体验。

参考

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005671b81e8991b448e3744

纠错
反馈