引言
Redux-optimist 是一款非常实用的 Redux 插件，能够有效地减少 Redux 应用程序中的不必要重复操作。本文将讲解如何使用 Redux-optimist，让你更加快速、高效地处理状态变更。
安装
首先，你需要在你的项目中安装 Redux-optimist。可以使用 npm 进行安装：
--- ------- -------------- ------
配置
接下来，让我们来看一下 Redux-optimist 的配置。为了能够在应用程序中使用 Redux-optimist，你需要在 createStore 函数中将这个 middleware 添加到中间件数组中：
------ - ------------ --------------- - ---- -------- ------ -------- ---- ----------------- ------ ----------- ---- -------------- ----- ----- - ------------------------ --- ---------------------------
使用
Redux-optimist 提供了一个 createOptimisticReducer 函数，用于创建一个包含乐观和悲观的状态对象。乐观和悲观状态的作用在于，当一个操作发生错误时，可以在这两种状态之间进行切换，从而避免重复性操作。
创建一个乐观的状态对象
------ - ------------------------ ---------- - ---- ----------------- ----- ------------ - - ------ --- ----------- ------ -- ----- ------- - ------------------------------------- ------------
一旦创建了这个乐观状态对象，我们就可以开始对它进行更改。
更新乐观状态
我们可以使用 createAction 和 createActionWithOptimistic 可以创建一个有 无乐观状态的 action。在需要触发 action 的地方，我们应该使用 createActionWithOptimistic 组件，它将在更新操作成功时返回一个类型为 OPTIMISTIC 的 action。
------ - -------------------------- - ---- ----------------- ----- ------- - --------------------------------------- ----- ---------- - ------------------------------------------
从状态中移除项目
为了从状态中移除一个项目，我们需要在 reducer 中使用 REMOVE_ITEM 类型的 action。注意，在这个 reducer 中，我们使用了 removeItem 函数，它是由 createActionWithOptimistic 创建的。
----- ------- - ------------------------------------- -------------
------------- ------- ------- -- --
---------
----------- ----------- --- -----------
------ ----------------------- -- ------- --- ----------------
---
---添加项目到状态中
在添加项目到状态中的时候，我们同样需要使用 createActionWithOptimistic 函数来创建 action。在我们 dispatch 一个 ADD_ITEM action 后，乐观的状态就会发生改变，并且我们将得到一个类型为 OPTIMISTIC 的 action 来通知 store 更新成功。
----- ------- - ------------------------------------- -------------
---------- ------- ------- -- --
---------
----------- ----------- --- -----------
------ -
---------------
-
--- ---------
------------------
--
--
---
---示例代码
下面是一个完整的使用 Redux-optimist 的示例代码：
------ - ------------ --------------- - ---- --------
------ - ------------------------ ---------- - ---- -----------------
------ - -- -- ------ - ---- -------
----- ------------ - -
------ ---
----------- ------
--
----- ------- - ------------------------------------- -------------
------------- ------- ------- -- --
---------
----------- ----------- --- -----------
------ -
---------------
-
--- ---------
------------------
--
--
---
---------------- ------- ------- -- --
---------
----------- ----------- --- -----------
------ ----------------------- -- ------- --- ----------------
---
---
----- ----- - -------------------- --- ---------------------------
----- ------- - ---------------------------------------
----- ---------- - ------------------------------------------
-- --- -- ----
------------------------ ----- ----- -- ----
-- ------ --- ---- -- --
-----------------------------------总结
Redux-optimist 是一款非常实用的 Redux 插件，通过使用它，我们可以更加快速地处理状态变更。在开发过程中，我们应该使用 createActionWithOptimistic 函数来创建有无乐观状态的 action，从而避免不必要的重复操作。同时，也要注意合理地组合 reducer 函数，并正确地处理各种错误情况。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f2e31563b0ab45f74a8bc32