Redux 是当下前端开发中常用的状态管理库，但是在使用中难免会遇到各种各样的问题和错误。本文汇总了常见的 Redux 错误及其解决技巧，帮助读者更好地应对问题并进行调试。
1. State 不更新
Redux 的核心是通过 reducer 更新 state 状态。但有时我们发现 state 没有被更新，这时我们需要排查以下问题：
1.1 Reducer 是否被正确调用
Reducer 是否被正确调用是首先需要检查的问题。如果 reducer 没有被正确调用，则 state 自然不会被更新。
我们可以在 reducer 中加日志进行排查：
export default function myReducer(state, action) {
console.log('Reducer called.'); // 打印调用日志
// ...
}或者使用 Redux DevTools 进行调试。
1.2 Action 是否正确被分发
Action 是触发 state 更新的唯一途径，因此我们需要确保 action 被分发到了 reducer。
我们可以在 actionCreator 中加入调试语句：
export function myAction(payload) {
console.log('Action dispatched with payload: ', payload); // 打印 action 参数
return {
type: 'MY_ACTION',
payload,
};
}或者在 middleware 中打日志：
const myMiddleware = store => next => action => {
console.log('Action: ', action); // 打印 action
return next(action);
};1.3 Immutable 不变性问题
Redux 中的 state 是不可变的，每次更新 state 都需要返回一个新的对象。如果 state 没有被正确更新，可能是因为由于浅拷贝等原因，state 对象没有被正确更新，所以我们需要查看是否正确使用了不可变性的方法。
我们可以使用 immutable 库进行操作，也可以手动实现。例如，在 reducer 中，我们可以使用 Object.assign 方法进行深拷贝：
export default function myReducer(state, action) {
switch (action.type) {
case 'MY_ACTION':
return Object.assign({}, state, { data: action.payload });
}
}2. Error: Actions must be plain objects
Error: Actions must be plain objects. Use custom middleware for async actions.
这个错误是由于 action 不是一个普通对象（plain object）导致的。Redux 的文档中要求 action 必须是一个普通对象，具有类型和一些数据。可能的原因包括：
- 忘记调用 actionCreator 函数。
- 在 actionCreator 中使用了异步函数或回调函数。
- 在 middleware 中使用了类似 thunk 等第三方库。
我们应该确保 action 是一个普通对象，或者使用 redux-thunk 等库来处理异步操作。
3. Error: Reducer "xxx" returned undefined
Error: Reducer "myReducer" returned undefined during initialization.
这个错误通常是因为 reducer 在初始化时没有返回一个定义的状态（state），而是返回了 undefined。我们可以手动加入默认的 state，例如：
const initState = {
data: [],
};
export default function myReducer(state = initState, action) {
// ...
}4. Debugging Tips
在调试 Redux 的过程中，有一些小技巧可以帮助我们更快地找出错误：
- 启用 Redux DevTools：使用 Redux DevTools 可以方便地查看 state，调试 action 和 reducer。
- 在 reducer 中加入日志：在 reducer 中加入日志可以方便地查看 reducer 的调用情况以及 state 的变化。
- 在 actionCreator 中加入日志：在 actionCreator 中加入日志可以方便地查看 action 的参数和调用情况。
- 在 middleware 中加入日志：在 middleware 中加入日志可以方便地查看 action 和 state 的变化以及错误信息。
5. Conclusion
本文总结了 Redux 中常见的问题和调试技巧，帮助读者更好地掌握 Redux 的使用。在实际的开发中，我们应该多尝试不同的技巧和方法，并建议使用 Redux DevTools 等工具来辅助调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a69ac648841e98943404d0