简介
redux-persist-react-native-fs 是一个用于 React Native 应用中,对 redux 进行状态持久化的 npm 包。它使用 React Native 的文件系统(rn-fs)来持久化 redux store,并提供了接口来访问持久化的数据。
安装
npm install --save redux-persist-react-native-fs
使用
在入口文件(例如 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