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 存储引擎。在终端中运行以下命令:
npm install --save redux-persist npm install --save redux-persist-storage-node npm install --save node-localstorage
使用 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