npm 包 redux-smooth-storage 使用教程

阅读时长 4 分钟读完

前言

redux-smooth-storage 是一个使用 Redux 实现本地存储的 npm 包。通过它,我们可以将 Redux 的状态储存到本地,以便在下次打开页面时能够恢复状态。本文将详细介绍如何使用 redux-smooth-storage

准备工作

首先,需要安装 redux-smooth-storage。可以通过 npm 进行安装:

使用方法

1. 配置存储

在 Redux 中使用 redux-smooth-storage 前,需要对存储进行配置。可以使用 redux-smooth-storageconfigureStorage 方法来进行配置。

whitelist 参数用于指定哪些状态需要进行本地存储,只有包含在 whitelist 中的状态才会被进行存储。

storageType 用于指定存储类型,localStoragesessionStorage 可以指定。如果要使用自定义存储类型,则需要设置自定义存储实例。

2. 调用中间件

与其他 Redux 中间件一样,使用 applyMiddleware 引入 redux-smooth-storage

middleware 方法需要传入 storage 对象,其中包含了之前配置的存储参数。

3. 完成,开始使用

现在,状态已经可以被存储到本地了。我们可以像平常一样,通过 getState 来获取状态。

示例代码

下面是一个使用 redux-smooth-storage 的完整示例。

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

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

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

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

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

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

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

总结

通过配置 redux-smooth-storage,我们可以将 Redux 的状态储存在本地,以便在下次使用时进行恢复。当你需要开发一个需要本地存储状态的应用时,redux-smooth-storage 是一个非常好的选择。

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

纠错
反馈