什么是 redux-pouch
redux-pouch 是一个 Redux 的插件，它将数据存储在 PouchDB 数据库中，PouchDB 本质上是一个在浏览器和 Node.js 中间件中运行的 JavaScript 数据库。redux-pouch 的作用是帮助 Redux 应用程序将状态快速存储在本地设备中。
安装
你可以通过 npm 包管理器来为你的项目安装redux-pouch：
npm i redux-pouch -S
集成
在集成 redux-pouch 前，确保已经在你的项目中引入了 redux-persist：
npm i redux-persist -S
在你的 Redux store 中，设置 redux-pouch 的存储引擎（由 redux-persist 提供）：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ----------- - ---- ----------------------------------
------ - --------------- ------------ - ---- ----------------
------ ------- ---- ------------------
------ - ---------------- --------------------- - ---- --------------
----- ------------- - -
---- -------
-------- --------
--
----- ---------------- - ----------------------------- -------------
----- ---------- - ------------------
----- ----- - ----------------------------- --------------------------------
----- --------- - --------------------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--现在，我们可以在应用程序中配置 redux-pouch。下一步是设置一个 pouchdb 数据库实例。在此之前，让我们确保安装了 PouchDB：
npm i pouchdb-browser -S
import PouchDB from 'pouchdb-browser';
const db = new PouchDB('my_database');
const pouchMiddleware = PouchMiddleware(db);PouchMiddleware 用于同步从 PouchDB 数据库加载的状态，并在未来在状态更改时将其写回数据库。
最后，在我们的 middleware 中添加 pouchMiddleware：
const middleware = [pouchMiddleware];
现在我们已经将 redux-pouch 集成到 application 中了。
使用
我们可以使用 redux-pouch 的 PouchMiddlewareAction 类型轻松地将 action 中的状态写入 PouchDB 中。
假设我们定义了以下 action：
-- -------------------- ---- -------
----- ------- - ------ -- -
------ -
----- -----------
-------- -
----- -----
---------- ------
--
--
--在我们的 reducer 中：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
----- ------- - -
----- --------------------
---------- -------------------------
--- -------------
--
-- -- -- -------- -- ---- - ----- -------- ---- --------------------- -- ----
-- --------- ----- ------ --- -- ---------- ---- ------ ----- -- ---- ----
-- ---- ---------
------ ---------- ---------
--------
------ ------
-
--现在，我们可以在 action 中使用 PouchMiddlewareAction，将我们的新状态写入 PouchDB。更改 addTodo 中的代码：
-- -------------------- ---- -------
----- - --------------------- - - -----------------------
----- ------- - ------ -- -
------ --- -----------------------
----- -----------
-------- -
----- -----
---------- ------
--
---
--它将把我们的新状态写入 PouchDB。如果我们现在重新启动应用程序，所有先前添加的 Todo 会自动加载。此外，将来的所有更改都会自动保存在本地数据库中。
总结
redux-pouch 是一个有助于 Redux 应用程序快速存储本地状态的插件，它使用基于 JavaScript 的 PouchDB 数据库。在本文中，你学习了如何在你的项目中使用 redux-pouch，并在你的 action 中将状态写入 PouchDB。我们希望这篇文章对你有所帮助，并且能够帮助你快速了解如何使用 redux-pouch。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ee361a36e0bce8d08