Redux 是一个流行的 JavaScript 数据库，它可以帮助前端开发者轻松管理应用程序的状态。它具有易于使用、模块化、可测试性、可扩展性、时间旅行调试等特点。
然而，应用程序中可能会出现异常和错误，这可能会导致 Redux 的状态树中的一些数据出现错误，进而影响整个应用程序。因此，在使用 Redux 开发应用程序时，我们需要考虑如何处理异常和错误。
错误处理
Redux 中的错误处理需要在中间件中实现。通常情况下，我们使用 redux-logger、redux-thunk 和 redux-saga 等中间件来处理这些错误，这些中间件可以帮助我们捕捉应用程序中可能出现的异常和错误。
redux-logger 会在控制台中记录所有 Redux 操作，这使得我们可以比较方便地查看 Redux 的行为。如果某个操作出现了错误，将在控制台中输出错误信息。
const store = createStore(reducers, applyMiddleware(logger));
redux-thunk 是一个中间件，可以帮助我们处理异步操作。它通常用于处理与服务器交互、获取远程数据等情况。如果存在异步操作出现了错误，使用 redux-thunk 可以捕获错误并对其进行处理。
-- -------------------- ---- -------
----- --------- - -- -- -
------ ---------- -- -
---------- ----- ------------------ ---
----------
---------------- -- ----------------
------------ -- -
---------- ----- ------------------- -------- ---- ---
--
------------ -- -
---------- ----- ------------------- -------- --- ---
---
--
--redux-saga 是另一种处理异步操作的中间件，它使用了 ES6 的生成器来简化异步代码的编写。与 redux-thunk 不同的是，redux-saga 可以使用 try...catch 语句来捕获错误，可以更加灵活地处理编程过程中出现的异常情况。
function* fetchUser() {
try {
const user = yield call(api.fetchUser);
yield put({ type: FETCH_USER_SUCCESS, payload: user });
} catch (err) {
yield put({ type: FETCH_USER_FAILURE, payload: err });
}
}异常处理
在 Redux 应用程序中，有些异常可能不是由 Redux 中间件发出的。这些异常可能是由非正常操作、浏览器崩溃、网络不稳定、后端错误等原因导致的。
为了处理这些异常，我们可以使用全局错误捕获器来捕获并处理这些异常。通常情况下，我们会使用 window.onerror 方法来进行捕获。当应用程序中出现错误时，window.onerror 方法会自动被触发，我们可以在该方法中编写代码，记录错误信息，并进行处理。
window.onerror = (message, url, line, column, error) => {
// 记录错误信息
console.log(`${message} (${url}:${line}:${column})`);
// 进行异常处理
// ...
};在全局错误捕获器中，我们可以将错误信息发送到后端，或者在控制台输出错误信息。我们还可以通过修改 Redux 的状态树来通知用户发生了错误。
window.onerror = (message, url, line, column, error) => {
// 记录错误信息
console.log(`${message} (${url}:${line}:${column})`);
// 修改 Redux 的状态树
store.dispatch({ type: ERROR_OCCURRED, payload: error });
};结论
因此，我们可以看到，Redux 如何处理异常及错误。在应用程序中，我们应该使用中间件来处理异步操作和异常情况，并使用全局错误捕获器来处理异常情况，这可以帮助我们更好地管理应用程序的状态。
在实际开发中，我们需要合理地利用 Redux 的工具和特性，对异常和错误进行处理，优化应用程序的用户体验，提高应用程序的性能和稳定性，让用户获得更加出色的用户体验。
完整示例代码：
-- -------------------- ---- -------
-- -------------------
-------------- - --------- ---- ----- ------- ------ -- -
-- ------
----------------------- -----------------------------
-- -- ----- ----
---------------- ----- --------------- -------- ----- ---
--
-- -- ----------- -----------
----- --------- - -- -- -
------ ---------- -- -
---------- ----- ------------------ ---
----------
---------------- -- ----------------
------------ -- -
---------- ----- ------------------- -------- ---- ---
--
------------ -- -
---------- ----- ------------------- -------- --- ---
---
--
--
-- -- ---------- -----------
--------- ----------- -
--- -
----- ---- - ----- --------------------
----- ----- ----- ------------------- -------- ---- ---
- ----- ----- -
----- ----- ----- ------------------- -------- --- ---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671309bead1e889fe20a0700