前言
在 Web 开发中，前端作为用户与服务器之间的桥梁，对用户体验至关重要。Redux 是其中重要的数据管理框架，而 redux-optimistic-thunk 包则是为了解决并发问题而出现的。
什么是 redux-optimistic-thunk
redux-optimistic-thunk 是一个增强型的 Redux Thunk 中间件，它具有一些优异的特性，我们来一一解释：
- 它允许异步操作正常地进行，并且在等待完成的同时也启动了一些本地的操作，这些本地操作是不必与服务器进行交互的；
- 它允许了轻松地撤回操作，这意味着如果一个操作失败了，那么我们可以简单地撤回这个操作，而不需要任何后续操作；
- 它会自动将操作转换为 Promise，这样我们就可以更加清晰地进行错误处理和流程控制。
redux-optimistic-thunk 的使用
安装包
首先，我们需要安装 redux-optimistic-thunk 包，使用以下命令：
npm install --save redux-optimistic-thunk
在 Redux 中使用
在 Redux Store 中引入 redux-optimistic-thunk：
import { createStore, applyMiddleware } from 'redux';
import { optimistic } from 'redux-optimistic-thunk';
import rootReducer from './reducers/index';
const store = createStore(
rootReducer,
applyMiddleware(optimistic),
);在这里，我们将 redux-optimistic-thunk 应用于我们的 Redux Store。
使用基本 thunk
我们可以通过使用 redux-optimistic-thunk 来创建基本的 thunk 处理程序。一个基本的 thunk 通常像下面这样：
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- --------- - -- -- ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- -------------------
----- ------ - ----- ----------------
---------- ----- --------------------- -------- ------ ---
- ----- ------- -
---------- ----- --------------------- -------- ----- ---
-
--
----- ------- - --------------------- -
----------- -------- -- -- ----- ---------------------- -------- -------------- ---
---------- -------------------
-------- -----------------
---------- ------------------
---
-- -------- ----- -----
--------------------------在这里，我们首先定义了一个名为 fetchData 的基本 thunk，它会 dispatch 3 个不同的 action，对应了请求开始、请求成功和请求失败。接下来，我们使用 optimistic 高阶函数来创建一个新的 thunk，它有一些额外的选项：
- onRollback：一个函数，可以通过它来撤回之前的操作；
- startType、endType 和 errorType：分别代表操作的开始、结束和失败的 action 名称。
我们还可以像这样为我们的新操作添加 payload 和其他属性：
const myThunk = optimistic(fetchData, {
onRollback: (action) => ({ type: 'FETCH_DATA_ROLLBACK', payload: action.payload }),
startType: 'FETCH_DATA_START',
endType: 'FETCH_DATA_END',
errorType: 'FETCH_DATA_ERROR',
payload: { id: 1 },
meta: { some: 'meta data' }
});在这里，我们添加了一个名为 payload 的新选项，同时也添加了一个名为 meta 的选项。这些属性会添加到最终的 action 中，可以在我们的 reducer 中进行进一步处理。
同时发送多个操作
我们可以同时发起多个操作，并使用不同的操作 ID 来对这些操作进行区分。这种方式可以更容易地进行分组，并更好地组织我们的代码。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- --------- - ---- -- ----- ---------- -- -
---------- ----- --------------------- -------- - -- - ---
--- -
----- -------- - ----- -------------------------
----- ------ - ----- ----------------
---------- ----- --------------------- -------- - --- ----- ------ - ---
- ----- ------- -
---------- ----- --------------------- -------- - --- ----- - ---
-
--
----- ------- - --------------------- -
---------- -------------------
-------- -----------------
---------- ------------------
---
-- -------- ----- -----
-------------------------------
-------------------------------在这里，我们定义了一个名为 fetchData 的基本 thunk，它会请求指定 ID 的数据。我们使用 optimistic 高阶函数来创建我们的新 thunk，它不再需要任何选项。我们在 Redux 中使用这个 thunk 时，将传递不同的 ID，以便针对这些操作进行不同的操作。
撤销操作
我们也可以使用 onRollback 选项来撤销我们之前执行的操作。这将会用于处理那些出错的请求。
-- -------------------- ---- -------
------ - ---------- - ---- -------------------------
----- --------- - -- -- ----- ---------- -- -
---------- ----- -------------------- ---
--- -
----- -------- - ----- -------------------
----- ------ - ----- ----------------
---------- ----- --------------------- -------- ------ ---
- ----- ------- -
---------- ----- --------------------- -------- ----- ---
----- ------
-
--
----- ------- - --------------------- -
----------- -------- -- -- ----- ---------------------- -------- -------------- ---
---------- -------------------
-------- -----------------
---------- ------------------
---
-- -------- ----- -----
-------------------------
-------------- -- -
----------------------------------------
---在这里，当我们错误地请求数据时，我们将会通过 dispatch action 来撤销之前的操作。我们还添加了一些错误处理逻辑，这将会在我们进一步处理这些错误时使用，我们在误操作时会将 error 抛出供错误处理使用。
小结
在这篇文章中，我们学习了如何使用 redux-optimistic-thunk 包来处理并发操作，这在 Web 开发中是一种非常常见的需要。我们还学习了如何使用这个包中存在的不同选项来进行更加精细的流控制以及错误处理。这些技巧将帮助我们更好地优化我们的前端代码，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b41c6eb7e50355dbcbe