前言
在前端开发中，使用 Redux 等安全性较高的状态管理库已经成为了很多开发者的选择。然而，当状态变得复杂时，就会出现一些安全性问题，例如因为异步更新状态、无效的 action 等情况，导致应用程序崩溃的情况。针对这个问题，有一个 npm 包叫做 redux-safe-reducers，它可以帮助开发者保证某些 reducer 是不会崩溃的，从而加强应用程序的鲁棒性。
安装
redux-safe-reducers 可以通过 npm 包管理器进行安装：
npm i redux-safe-reducers
用法
redux-safe-reducers 通过添加一个 enhancer 来增强原有的 reducer。下面是一个例子：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ------------------- ---- ----------------------
----- ------- - ------- ------- -- -
------------------- -
---- ------------
------ ----- - --
---- ------------
------ ----- - --
---- --------
----- --- ---------------- ---- ---------
--------
------ ------
-
--
----- ----------- - -----------------------------
----- ----- - ------------------------ ---上面代码中，先创建一个常规的 reducer。通过传入常规的 reducer，safeReducerEnhancer 函数返回一个新的 reducer，这个新的 reducer 是在常规 reducer 基础上增加了异常捕获功能。
配置
我们可以在 safeReducerEnhancer 函数中传入一个可选的参数配置对象。下面是配置对象中可用的属性：
errorHandler
errorHandler 属性指定当 reducer 函数体内发生异常时，应该如何处理该异常。它可以是一个函数或者一个字符串。如果 errorHandler 是一个函数，则该函数接受一个潜在的错误对象，并且它必须返回一个更新后的状态。如果 errorHandler 是一个字符串，则它是一个状态恢复的初始值。
下面是一个配置 errorHandler 的例子：
const errorHandler = (err, state) => {
console.log(err); // eslint-disable-line no-console
return { ...state, message: err.message };
};
const safeReducer = safeReducerEnhancer(reducer, { errorHandler });whitelist
whitelist 属性是一个数组，包含了可以安全执行的 action.type 的值。属于这个数组的 action.type 不会捕获错误，从而确保 reducer 可以正常执行。这个配置项对于那些偶尔返回 undefined 或 null 的 reducer 特别有用。
下面是一个配置 whitelist 的例子：
const whitelist = ['INCREMENT', 'DECREMENT'];
const safeReducer = safeReducerEnhancer(reducer, { whitelist });结语
redux-safe-reducers 是一个非常实用的 npm 包，它可以帮助我们更加安全地管理 Redux 状态。在实际开发中，我们可以根据实际需求选择是否使用这个 npm 包。当然，如果你需要手动捕捉和处理所有 reducer 中可能出现的异常，也可以不使用该 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a2c