在使用 Redux 进行开发时,我们经常会遇到这样的错误:' 在 reducer 中找不到默认情况'。这个错误通常是由于我们在 reducer 中没有处理某些 action 类型造成的。本文将详细介绍这个错误的原因、解决方法以及如何避免这个错误的发生。
错误原因
Redux 的 reducer 是一个纯函数,它接收旧的 state 和 action,返回新的 state。在 reducer 函数中,我们通常使用 switch 语句来处理不同的 action 类型。例如:
-- -------------------- ---- ------- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - -展开代码
在上面的 reducer 中,我们处理了两个 action 类型:'INCREMENT' 和 'DECREMENT'。如果 action 的类型不是这两个值,那么就会返回旧的 state。这个默认情况非常重要,因为它保证了 reducer 总是会返回一个新的 state。
但是,如果我们在 reducer 中没有处理某些 action 类型,那么就会出现上面提到的错误:' 在 reducer 中找不到默认情况'。这个错误的原因是 Redux 要求我们的 reducer 必须处理所有的 action 类型,否则就会抛出这个错误。
解决方法
解决这个错误的方法非常简单:在 reducer 中添加一个默认情况,返回旧的 state。例如:
-- -------------------- ---- ------- -------- ------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - ------ ----------- - - -- ---- ------------ ------ - ------ ----------- - - -- -------- ------ ------ - -展开代码
在上面的 reducer 中,我们添加了一个默认情况,返回旧的 state。这个默认情况会处理所有没有被其他 case 匹配的 action 类型。
避免错误
虽然添加一个默认情况可以解决这个错误,但是我们还是应该尽可能地避免这个错误的发生。为了避免这个错误,我们可以采取以下措施:
- 使用常量来定义 action 类型。这样可以避免拼写错误或者使用了未定义的 action 类型。
- 在 reducer 中使用 switch 语句来处理所有的 action 类型。这样可以避免漏掉某些 action 类型。
- 在编写 reducer 之前,先定义好所有的 action 类型。这样可以避免在编写 reducer 时漏掉某些 action 类型。
示例代码
下面是一个使用 Redux 的示例代码,其中包含了一个 reducer 和两个 action:
-- -------------------- ---- ------- -- -- ------ -- ----- --------- - ------------ ----- --------- - ------------ -- -- ------- -------- ------------- - - ------ - -- ------- - ------ ------------- - ---- ---------- ------ - ------ ----------- - - -- ---- ---------- ------ - ------ ----------- - - -- -------- ------ ------ - - -- -- ----- ----- ----- - --------------------- -- -------- ------ ---------------- ----- --------- --- ---------------- ----- --------- ---展开代码
在上面的代码中,我们使用了常量来定义 action 类型,并在 reducer 中使用了 switch 语句来处理所有的 action 类型。这样可以避免出现 ' 在 reducer 中找不到默认情况' 的错误。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67d900e1a941bf713406a900