介绍
redux-optimist-prime 是一个通过 redux 状态管理来实现客户端乐观更新的 npm 包。它的主要作用是让你的应用程序更加健壮，即使请求发生错误，客户端的界面不会受到影响。
这个包的特点在于，它会维护两个状态树，一个称为 future state，另一个称为 present state。future state 代表我们正在做的操作，而 present state 代表当前的应用程序状态。
安装
你可以通过 npm 安装 redux-optimist-prime：
npm i redux-optimist-prime
然后在你的项目中引入它：
import { createOptimist } from 'redux-optimist-prime';基本用法
1. 创建 Optimist Store
使用 createOptimist 函数创建一个带有乐观更新能力的 store。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------------- - ---- -----------------------
------ ----------- ---- -------------
----- ------------ - ---
----- ----- - ---------------
------------
------------
------------
-
--2. 创建乐观 Action
使用 withOptimism 函数生成一个带有乐观更新的 action。
import { withOptimism } from 'redux-optimist-prime';
export const loadPosts = withOptimism(() => ({
type: 'LOAD_POSTS',
payload: fetch('/posts').then(response => response.json())
}));3. 处理 Action
在 Reducer 中处理带有乐观更新的 action。
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------
-------- ------------------- ------- -
------ ------------- -
---- -------------
------ -
---------
--------------- -
-----------------------
---------- ----
-
--
---- ---------------------
------ -
---------
--------------- ---
------ ---------------
------------ ----------
--
---- ---------------------
------ -
---------
--------------- ---
------ --------------
--
--------
------ ------
-
-4. Dispatch Action
使用 dispatch 方法分发带有乐观更新的 action。
store.dispatch(loadPosts());
高级用法
1. 自定义状态键值
如果你的应用程序在使用 future state 和 present state 外还会有其他的状态，你可以通过 createOptimist 函数的第二个参数来自定义状态键值。
-- -------------------- ---- -------
----- ------------ - -
-------- -----------
--
----- ----- - ---------------
------------
------------
------------
--
-
--------------- ----------------
---------------- ----------------
-
--2. 取消请求
你可以使用 cancelOptimism 方法来取消添加到队列中的未来状态。
-- -------------------- ---- -------
------ - ------------- -------------- - ---- -----------------------
------ -------- ----------------- -
------ ---------- --------- -- -
----- - ------------- - - -----------
---------------------------------------------------
--
-
------ ----- --------- - --------------- -- --
----- -------------
-------- ----------------------------- -- ----------------
----3. 自定义乐观更新行为
你可以使用 withOptimism 函数的第二个参数来自定义乐观更新行为。
-- -------------------- ---- -------
------ - ------------ - ---- -----------------------
------ ----- --------- - -------------
-- -- --
----- -------------
-------- ----------------------------- -- ----------------
---
-
-------- -------- -- -
------------------------
--
---------- ---------- ------- -- -
------------------------
-----------------------------------
---------------------------------- ------ -----------------
--
---------- ---------- ------ -- -
------------------------
----------------------------------
--------------------------------- -- ---- ------ ------ --- ----- ----------
-
-
--总结
redux-optimist-prime 是一个非常实用的 npm 包，帮助你实现了非常有用的乐观更新功能。通过它，我们可以维护两个状态树，一个用于表示当前的状态，而另一个则用于表示将要进行的操作，以此实现乐观更新。如果你的应用程序需要支持乐观更新，那么你一定要尝试一下 redux-optimist-prime。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700be361a36e0bce8c4c