Redux 是一个 JavaScript 应用的状态容器，用于管理状态随时间的变化。在 Redux 中，组件不直接操作状态，而是将状态操作交给操作函数和中间件来处理。这种方案可以让状态透明，并使状态的变化有序且易于调试。
但是，当 Redux 操作函数和中间件出现错误时，会对应用造成很大的影响，因此，正确的错误处理和清晰的日志记录尤为重要。
错误处理
在 Redux 中，错误处理主要分为两种：同步错误和异步错误。
同步错误通常是由操作函数操作数据时发生的错误，这种错误常常是由 JavaScript 语法错误引起。使用 Redux，如果操作函数抛出了错误，那么状态将不会改变，Redux 会将错误对象封装到一个 action 对象中。如果你想要处理同步错误，可以编写一个actionErrorHandler中间件，例如：
const actionErrorHandler = (store) => (next) => (action) => { try { return next(action); } catch (err) { console.error('actions error', err); return store.dispatch({ type: 'ACTION_ERROR', payload: err }); } };
这个中间件将会捕捉所有抛出的同步错误，并将错误封装到 ACTION_ERROR action 中，便于后续处理。
异步错误则通常是由 Redux 异步操作调用返回的 Promise 产生的错误，这种错误可能是网络请求错误或其他异常。如果使用 Redux 中间件编写异步操作，要注意处理好这些错误。
例如，使用 redux-thunk 中间件时，可以这样编写 Promise 异常处理：
-- -------------------- ---- ------- ------ - ---------------- - ---- ------------------- ----- -------------- - ----------------- ------------------------- ----- -------- -- - -- ----------- ----- --- --------------------- ------- -- ------ ----- --- ----------------- -- ------------------- ------ - -- -- - --------- --- ------ --------------------------------------- -- - -------------------------- ------- ----- ---展开代码
如果你使用其他类型的中间件，例如 redux-logic，可通过 reject 函数恰当地捕获 Promise 异常。
-- -------------------- ---- ------- ----- -------------- - ------------- ----- ------------------------- ----- --------- ------ -- --------- ----- - --- - -- ----------- ----- --- --------------------- ------- -- ----- --- ----------------- -- ------------------- ------ ---------- ----- -------------------- -------- -------------- --- - ----- ----- - -------------------------- ------- ----- ------- - -- ---展开代码
在这个示例中，开发者手动抛出一个 Error 对象，并通过 console.error 函数输出异常信息，这对于生产环境是不够的，因此，接下来让我们关注如何编写正确的日志记录。
日志记录
一个好的日志记录方案可以让开发者及时发现应用状态的问题，并有助于改进应用的质量。在 Redux 中，日志记录应该包括错误的详细信息以及错误发生的操作，例如状态变化、网络请求响应等。
在 Redux 的日志记录实现中，Redux-logger 是一个非常流行的选择。它可以捕捉所有的 action、state 的变化，以及 middleware 中的状态。也可以扩展它来记录 Redux 中的异步和同步错误:
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ----- ---------------- - -------------- ------ ------- ---------- ----- ---------- -- -- ----- ----------------- ------- -- ------ ----------------- ------- -- -- -------- -------------- ------ ------------ --- --- ----- ----- - -------------------- ----------------------------------- -- - ---------- ------- ----- ----------------- - ------- -- ------ -- -------- -- - -- ------- ------ --- -------- -- ------ ----------- --- ----------- - ------ ---------------- -- - ---------------- ------ ------------------ --- - ------ ------------- --展开代码
这个例子中，我们通过创建一个 loggerMiddleware 来记录 action、state 和 error，并通过创建一个 asyncErrorHandler 来记录异步错误。
相应的日志将被视为以下内容：
info actions incrementAsync {"type":"counter/incrementAsync","payload":1} error actions error Error: incrementAsync`s err at eval (redux.js:63:17) at Object.dispatch (redux.js:690:13) at eval (stateLogic.js:122:11) at eval (stateLogic.js:71:33) at eval (stateLogic.js:50:23) info actions ACTION_ERROR {"payload":{"message":"incrementAsync`s err","stack":
在这个示例中，我们使用了标准的日志格式，可以根据需要调整格式。
结论
Redux 在实现异步错误处理和日志记录方面提供了丰富的功能和中间件，开发者可以通过选择合适的中间件和扩展来以清晰的方式处理这些问题。在限定的空间里，我们只展示了一些常用的技巧，我们也不会在实际项目中使用所有的解决方案，根据项目的需求进行合适的选择是重要的。
小提示：
在使用 Redux 进行开发时，不仅要关注功能的实现，更要关注代码的健壮性和质量。良好的代码质量和维护能力能极大地提高项目的可靠性和稳定性，更让团队成员更容易地协作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f76d52c5c563ced59b7f8d
