何为 redux-optimistic
redux-optimistic 是一个 Redux 的增强库，它可以在 Redux 中实现乐观更新。Redux 的状态管理中，每次 dispatch action 都是同步更新状态的，而 redux-optimistic 可以允许我们在发送一个 action 后，可以先在本地对状态进行更新，等待服务端响应后再进行最终更新。这一过程可以给用户更好的交互体验和更快的响应速度。
如何安装和使用
redux-optimistic 是通过 npm 来安装和使用的，可以使用以下命令来安装：
npm install redux-optimistic
之后，在 Redux 中引入 redux-optimistic，使用 optimistic 函数增加中间件，如下所示：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ---------- ---- -------------------
------ ----------- ---- -------------
----- ----- - ------------
------------
----------------
-------------
--
--然后我们便可以在 action 中使用 optimistic 函数对 action 进行封装，如下所示：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ ----- -------- - -----------
------ -------- -------------------- ------- -
------ ------------
----- ---------
-------- - ----- ------ --
----- -
------- -------
---- -------------
----- - ---- --
--
---
-
------ -------- ------------------ ------- -
------ -
----- ---------
-------- - --- ------ --
--
-
------ -------- ------------------- -
------ -
----- ---------
-------- - ------ ----- ------ --
--
-其中，optimistic 函数的参数是一个对象，它包含了 action 的 type、payload 等信息，在 meta 中，我们可以指定向后端发送什么样的请求，并在获取到响应后进行处理。在 action 创建函数返回的 action 中，我们需要根据是否有错误以及是否为乐观更新来处理状态。
在 reducer 中，我们需要对 action 进行判断，如下所示：
-- -------------------- ---- -------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ---------
-- -------------- -
-- -------
------ ------------------- -- ----------- --- -----------------------
-
-- ------------------- -
-- -------
------ -
---------
-
--- ----------------------
----- --------------------
--------- ------
------- ----------------------
--
--
-
-- -----
------ ---------------- -- -
----------- --- ---------------------
- - -------- --- ------------------ ------- ---- -
- ----
---
-
------ ------
-在 reducer 中，我们首先判断 action 是否为失败状态，然后判断当前是否为乐观更新，最后再对成功状态进行处理。
示例代码
接下来，我们将编写一个简单的 TodoList 来展示 redux-optimistic 的使用。
安装依赖
首先，我们需要安装 React 和相关依赖：
npx create-react-app todo-list cd todo-list npm install react-redux redux redux-thunk redux-optimistic --save
其中，react-redux 负责将 React 组件与 Redux 进行绑定，redux-thunk 负责处理异步请求，redux-optimistic 则是我们本文的主角。
编写组件
然后，我们开始编写一个简单的 TodoList 组件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------------- - ---- ------------
-------- ---------- -
----- ------ -------- - -------------
----- ----- - ------------------- -- -------------
----- -------- - --------------
----- ------- - -- -- -
----------------------------- -------------
------------
--
----- -------- - ------- -- -
----------------------------
--
------ -
-----
----
----------------- -- -
--- ------------------------------
---
-----
------ ----------- ------------ ------------------- --
------- --------------------- -------------
------
--
-
------ ------- ---------在组件中，我们通过 useSelector 来获取 Redux store 中的状态，而通过 useDispatch 来获取 dispatch 方法，从而可以 dispatch 一个 action。
在组件中，我们通过 addTodoRequest action 来对 Todo 进行添加操作，其中第二个参数为创建一个“临时 ID”，用来在本地先更新 Todo 列表。
编写 action
接下来，我们编写 addTodoRequest action，其中使用了 optimistic 函数进行封装：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------
------ ----- -------- - -----------
------ -------- -------------------- ------- -
------ ------------
----- ---------
-------- - ----- ------ --
----- -
------- -------
---- -------------
----- - ---- --
--
---
-
------ -------- ------------------ ------- -
------ -
----- ---------
-------- - --- ------ --
--
-
------ -------- ------------------- -
------ -
----- ---------
-------- - ------ ----- ------ --
--
-在 action 中，我们将 optimistic 函数进行了包装，其中 meta 指定了我们向服务器发送请求的相关信息。
编写 reducer
最后，我们编写 reducer，处理我们最初为本地数据所添加的“临时 ID”：
-- -------------------- ---- -------
------ - -------- - ---- ------------
------ ------- -------- ----------- - --- ------- -
------ ------------- -
---- ---------
-- -------------- -
------ ------------------- -- ----------- --- -----------------------
-
-- ------------------- -
------ -
---------
-
--- ----------------------
----- --------------------
--------- ------
------- ----------------------
--
--
-
------ ---------------- -- -
----------- --- ---------------------
- - -------- --- ------------------ ------- ---- -
- ----
---
-
------ ------
-在 reducer 中，我们首先处理错误状态，然后处理乐观更新状态，最后再处理真正的修改状态。
总结
通过以上的例子，我们可以看到，使用 redux-optimistic 可以让我们在 Redux 中实现乐观更新，从而达到更好的用户交互和响应速度。但是需要注意，乐观更新也会带来一些问题，例如某些场景下的冲突检测等，需要我们根据使用场景进行考虑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c4f