在使用 Redux 进行前端开发时，经常会出现 “Reducer 未定义” 的报错信息，这个错误信息一般是由于代码书写错误或者引用错误引起的。如果能够准确定位错误的原因，就可以快速地解决这个问题，提高开发效率。
问题描述
在开发 Redux 应用程序时，我们将多个 reducer（以下简称 R1, R2, R3）合并到一个 rootReducer 中，通过 createStore 创建 store 时，将 rootReducer 作为参数传入。我们在页面中调用 dispatch(action) 发起一个 action 后，不同的 reducer 根据 action 的类型去更新 state，但有时候我们发现 dispatch(action) 并没有执行对应的 reducer，控制台会出现 “Reducer 未定义”的错误信息，这时候我们需要去寻找错误的原因并解决问题。
错误原因
Redux 的 createStore 接收的参数是 reducer，也就是 reducer 必须要在 createStore 之前存在。如果我们在 createStore 之前调用 dispatch，就会出现 “Reducer 未定义”的错误信息，因为此时调用 dispatch 时，reducer 还没有被定义。
解决方案
在.createServer 之前要确保 reducer 会被定义，解决思路很简单：将调用 createStore 之前的代码逻辑调整，或将调用 createStore 的逻辑提前。
具体来说，我们可以将 rootReducer 单独放在一个文件中，文件名为 reducer.js，示例代码如下：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ -- ---- ---------- ------ -- ---- ---------- ------ -- ---- ---------- ----- ----------- - ----------------- --- --- -- --- ------ ------- ------------
然后我们在 createStore 之前就要确保 rootReducer 已经被定义。如果你编写的代码是一个很简单的小应用，可以将之前的代码放在一个 index.js 文件中，示例代码如下：
import { createStore } from 'redux';
import rootReducer from './reducer';
const store = createStore(rootReducer);
// 在这里执行 dispatch 操作如果你的代码很复杂，可以考虑将执行顺序整理成一个流程图，从而更好地定位问题、解决问题。如下图所示：
实例代码
下面提供一个示例代码，供参考：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- ------------
----- ----- - ------------------------ ----
----- ------ - -
----- ---------
-------- -
----- ----- -----
-
--
-----------------------总结
Redux 是现代前端开发中极其重要的一部分，掌握 Redux 的使用和调试技巧可以显著提高我们的开发效率和代码质量。本文主要介绍了如何解决 “Reducer 未定义” 的问题，希望能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ef01c9f6b2d6eab3901a11