在 Redux 中，我们经常需要设置应用程序的初始状态。为了实现这个目的，我们使用 preloadedState 参数来传递应用程序的默认状态。在 Redux 开发中，有时候会出现一个常见的错误：Unexpected key found in preloadedState。本文将介绍这个错误的原因、影响以及如何解决。
什么是 preloadedState？
在 Redux 中，store 可以接受一个可选的 preloadedState 参数。它用于设置应用程序的初始状态，在 createStore() 函数中作为第二个参数传递。preloadedState 是一个普通 JavaScript 对象，其中包含了应用程序的默认状态。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- -------------- - - ----- - ------ --- ------ - -- ----- - ----- ----- ---- -- -- -- ----- ----- - ------------------------ ----------------
上面的示例中，preloadedState 包含了两个对象：cart 和 user。cart 对象表示购物车状态，包含 items 数组和 count 属性。user 对象表示用户状态，包含 name 和 age 属性。在应用程序初始化时，store 会将 preloadedState 中的值作为初始状态保存起来。
Unexpected key found in preloadedState 错误的原因
当我们传递了一个包含未知键的 preloadedState 对象时，Redux 会抛出一个 Unexpected key found in preloadedState 错误。例如，下面的示例中，我们添加了一个额外的键 settings：
const preloadedState = {
cart: { items: [], count: 0 },
user: { name: '张三', age: 20 },
settings: { language: 'zh-CN', theme: 'light' },
};这个错误的原因是 Redux 要求我们传递的 preloadedState 对象必须与 reducer 中定义的初始状态一致。如果 preloadedState 包含了未知的键，就会导致 reducer 无法处理这个对象，从而引发错误。
Unexpected key found in preloadedState 错误的影响
如果你遇到了 Unexpected key found in preloadedState 错误，可能会遇到以下几种情况：
- 应用程序无法启动
- 应用程序以错误的状态启动
- 部分功能无法正常工作
这些问题可能会导致用户无法使用应用程序，从而影响用户体验和产品质量。
如何解决 Unexpected key found in preloadedState 错误
避免 Unexpected key found in preloadedState 错误的最佳方法是使用 combineReducers() 函数。combineReducers() 用于将多个 reducer 合并成一个，保证每个 reducer 只处理其对应部分的状态。当 combineReducers() 合并多个 reducer 时，它会将每个 reducer 对应的初始状态封装在一个对象中。
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- -------- ------ ----------- ---- ------------------ ------ ----------- ---- ------------------ ----- ----------- - ----------------- ----- ------------ ----- ------------ --- ----- ----- - -------------------------
在上述示例中，我们定义了两个 reducer：cartReducer 和 userReducer。这些 reducer 只处理与其对应的状态部分。使用 combineReducers() 函数，我们可以将它们合并为一个根 reducer。
当我们调用 createStore() 函数时，不需要传递 preloadedState 参数。Redux 库会自动调用各个 reducer 来获取它们各自的初始状态。
如果你需要设置应用程序的默认状态，可以将其定义在 reducer 中作为初始状态。例如，下面是 cartReducer 的实现：
-- -------------------- ---- -------
----- ------------ - -
------ ---
------ --
--
-------- ----------------- - ------------- ------- -
------ ------------- -
-- ------- ------
--------
------ ------
-
-在上述示例中，我们将 cartReducer 的初始状态定义为包含 items 和 count 两个属性的对象。如果我们需要设置默认状态，只需要将 initialState 的属性赋值即可。
总结
在 Redux 中，preloadedState 参数用于设置应用程序的初始状态。当 preloadedState 包含未知的键时，就会引发 Unexpected key found in preloadedState 错误。这个错误可能导致应用程序无法启动、启动过程异常或无法正常工作。为了避免这个错误，我们可以使用 combineReducers() 函数将多个 reducer 合并成一个，同时将初始状态与 reducer 配对定义在一起。避免 Unexpected key found in preloadedState 错误，可以提高应用程序的可靠性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b3611968c7c53b06be5af