npm 包 Redux Persist Storage Node 使用教程

阅读时长 8 分钟读完

Redux 是一种 JavaScript 应用程序状态管理工具,它用于处理全局状态(state)并使 React 应用程序更有效率,流畅和开发者友好。Redux Persist 是 Redux 应用程序的另一个 npm 包,它提供了一种截面方式,可让您将状态信息持久存储在浏览器缓存中,以便在应用程序重启后恢复状态。

但是现在,这个地方将要告诉你在使用 Redux Persist 时如何将状态信息存储在一个与应用程序不同的位置。 我们将介绍如何使用 redux-persist-storage-node npm 包将状态信息存储在具有 Node.js 环境的服务器上。这对于使用 React + Node.js 技术栈开发的应用程序尤其有用。

安装 Redux Persist 和 storage 插件

在使用 redux-persist-storage-node 之前,需要安装 Redux Persist 以及你要使用的 storage 插件。在这里我们将使用 node-localstorage 作为 storage 存储引擎。在终端中运行以下命令:

使用 Redux Persist

要使用 redux-persist 存储您的 Redux 应用程序状态,您需要在 Redux store 中添加 persistReducer 和 persistStore。以下是一个 Redux 存储的基本配置:

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

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

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

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

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

通过在创建您的 Redux store 前将 persistReducer 和 persistStore 添加到您的应用程序存储配置中,Redux Persist 将自动将您的应用程序状态存储到本地存储中。

将状态信息存储在服务器上

为了将应用程序状态存储到基于服务器的存储位置(例如 AWS S3),您需要编写一个存储引擎,该引擎将状态信息上传到指定位置。并且,你可以使用 redux-persist-storage-node 为你提供一种上传状态信息的解决方案。

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

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

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

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

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

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

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

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

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

在上面的代码中,我们创建了一个 myUploadFunction,它将状态数据在 Node.js 服务器上上传到 S3 存储桶中。此外,在存储配置中传入 upload 方法和 bucket 和 key 作为参数套件完整上传信息。

示例代码

下面是一个完整的示例代码,展示了如何使用 redux-persist-storage-node 安装一个Redux应用程序,并将其状态信息上传到 AWS S3 存储桶:

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

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

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

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

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

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

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

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

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

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

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

在这个示例中,我们的 Redux store 只有一个计数器计数器,我们对它进行了一些增加和减少操作。同时,我们通过store.subscribe监听状态信息的存储和上传。

结论

通过使用 redux-persist-storage-node,您可以自定义存储引擎,将 Redux 应用程序状态信息与特定服务器或第三方服务集成,为您的应用程序提供安全,可靠的状态管理和存储。如果你正在使用 React 和 Node.js 设计你的应用程序,这个 npm 包将是您不可或缺的工具之一。希望这篇文章可以帮助到你。

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

纠错
反馈