介绍
redux-optimistic-manager 是一个针对 Redux 应用的 npm 包，它的主要作用是管理 Redux 中的 optimistic action。在 Redux 应用中，我们通常会发起一些会改变应用状态的 action，但有些 action 可能会失败，比如创建一个新的记录时，可能由于某些原因导致创建失败，这时我们可以通过 redux-optimistic-manager 包来实现一些乐观的处理。
安装
使用 npm 进行安装：
npm install redux-optimistic-manager --save
使用
创建 middleware
在 Redux 应用中使用 redux-optimistic-manager，需要创建一个中间件，示例代码如下：
import { createStore, applyMiddleware } from 'redux'
import optimisticMiddleware from 'redux-optimistic-manager'
import rootReducer from './reducers'
const store = createStore(
rootReducer,
applyMiddleware(optimisticMiddleware)
)在上面的代码中，我们使用 applyMiddleware 函数来添加 optimisticMiddleware 中间件。
发起 optimistic action
通过 redux-optimistic-manager 发起 optimistic action，需要分别指定 action 类型和 payload：
-- -------------------- ---- -------
-
----- -----------
-------- - --- -- ----- ------ ------ --
----------- -----
---------- -
----- -------------------
--
---------- -
----- -------------------
-
-这里我们演示的是添加一个待办事项，我们通过 type 和 payload 来描述 action 的类型和数据。然后我们指定了一个 optimistic 属性，将其设为 true，表明这是一个乐观的 action，表示我们希望这个 action 能够成功执行。然后，我们指定了 onSuccess 和 onFailure 属性，这两个属性值都是一个对象，表示在 action 执行成功和失败时，要分别发起的 action。
reducer 处理乐观 action
当我们发起一个乐观 action 时，Redux 中的状态有可能还没有更新，但我们希望用户可以看到最新的状态。为了实现这个需求，我们需要在 reducer 中对这些乐观 action 进行特殊处理，示例代码如下：
-- -------------------- ---- -------
------ - ------------- - ---- ---------------
----- ------------ - --------------
-
--------- ------- ------- -- -
-- ------------------- -
------ ---------------- ---------
-
------ ----------
--
----------------- ------- ------- -- -
------ ----------
--
----------------- ------- ------- -- -
------ ----------------- -- ------- --- ------------------
-
--
--
-在上面的代码中，我们使用 handleActions 函数来创建一个 reducer。然后，我们针对 ADD_TODO action 进行了特殊处理，我们判断了 action.optimistic 属性是否为 true，如果为 true，则将新增的 todo 插入到数组的前面，表示用户已经成功创建了一个 todo。如果为 false，则不需要做任何操作。在 ADD_TODO_SUCCESS 和 ADD_TODO_FAILURE 中，我们也可以对这两种 action 进行特殊处理。
示例
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- -------
------ -------------------- ---- --------------------------
------ - ------------- - ---- ---------------
----- ----------- - --------------
-
--------- ------- ------- -- -
-- ------------------- -
------ ---------------- ---------
-
------ ----------
--
----------------- ------- ------- -- -
------ ----------
--
----------------- ------- ------- -- -
------ ----------------- -- ------- --- ------------------
-
--
--
-
----- ----- - ------------
------------
-------------------------------------
-
----- ------- - -
----- -----------
-------- - --- -- ----- ------ ------ --
----------- -----
---------- -
----- -------------------
--
---------- -
----- -------------------
-
-
-----------------------在上面的示例代码中，我们创建了一个 Redux 应用，然后定义了三个 reducer： ADD_TODO、ADD_TODO_SUCCESS 和 ADD_TODO_FAILURE。我们使用 applyMiddleware 函数来添加中间件 optimisticMiddleware。最后，我们发起了一个 ADD_TODO 的 action，这是一个乐观的 action，它希望能够成功执行。如果执行成功，则会发起一个 ADD_TODO_SUCCESS 的 action；如果执行失败，则会发起一个 ADD_TODO_FAILURE 的 action。
总结
redux-optimistic-manager 包是一个非常有用的工具，它可以帮助我们实现一些乐观的处理。在实际的项目中，有些操作可能会出现失败的情况，但我们希望用户能够看到最新的状态，这时我们可以使用这个工具来实现这个功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbcc8