Redux Toolkit中action派发但state值不更新的原因

爱被打了一巴掌 2023-10-16 13:23 27阅读 0赞

最近一个react项目使用了Redux Toolkit，但是遇到了一个问题：数组始终返回为null，读取不到length.

![f78f342d2ab042e9b0bea1aef482c5d3.png][]

![b04792584b264a26bc91dff604f4b20f.png][]

**这个只是问题的表象，真正的原因是productList数据没能从redux中结构出来**

![9ff160f5795840938cae1a7c17e1c9e4.png][]

但是postman请求是由数据返回的：

![7d95788bd52041e5b2e28772a0af5e5e.png][]

**推断：虽然redux的action已经派发，但state值没有更新，导致页面渲染失败。**

查看redux调试工具，action派发失败，状态为rejected，报错信息：undefined is not valid JSON

![d271612cae7a4a1f91e5309af23533fb.png][]

可是为什么会出现这个问题？redux哪里出了错误呢？

于是继续审查redux的代码，终于找到了线索：

![ca8b1c523c6e4e9c90e2f9342e4aa23b.png][]

这里有个JSON解构的操作：从header中获取"x-pagination"的信息。**但是如果header中如果不存在"x-pagination"字段**，**那么JSON.parse就会解析失败，因为此时相当于对undefined对象进行解析**，自然就会报错，这就是redux为什么会解析失败的原因，因为下面postman显示返回的header中确实没有x-pagination字段：

![b0f27a1d13a84fe6b459bc94ef30c29f.png][]

所以，这里必须对hearder获取x-pagination的结果进行一个判空操作：

![ecb71c3dcb0146eda082f0bbac8efe23.png][]

> JSON.parse(pagination ? pagination : null )

**通过上面一行代码就能避免JSON.parse失败，从而导致redux action派发出错**

**此时redux action派发成功，store里面也有数据了**

![39fdda64593a4cddb6a47147db99257f.png][]

**以上的例子是web客户端出现的JSON解析错误导致的redux， action派发失败。**

同样： **服务端如果出现JSON解析问题**，同样也会导致客户端的redux解析错误，同样导致action派发失败。如下面的例子： redux报错： ""\[object Object\]" is not valid JSON"

![cf91161c8c4c49fc9e5f0e1828290ea0.png][]

**原因是服务端在响应请求时，在设置headers没有把object对象转化成字符串，而是直接把object对象传给了header。**

![f8782749ec404f75856deeed51a76c2c.png][]

这样客户端在解析header数据时，必然报错！

解决办法：服务端设置headers时，**使用JSON.stringify将JSON对象转化成JSON字符串:**

> res.header("x-pagination", JSON.stringify(paginationInfo));

![940a3eb128f44cadb115c9872aba6f2c.png][]

**总结：Redux Toolkit中action派发但state值不更新的原因，通常是由action派发失败造成。**

**action派发失败的原因： JSON数据解析错误。这里分两种情况：**

**1. react web客户端代码中redux做JSON.parse解析操作时，没有进行判空处理**

**2. 服务端设置header对象时，没有将JSON对象转化成字符串。**

**总而言之： redux使用****JSON.parse时一定要非常小心，**

**而header必须通过字符串设置数据，不能接收JSON对象！**

[f78f342d2ab042e9b0bea1aef482c5d3.png]: https://img-blog.csdnimg.cn/f78f342d2ab042e9b0bea1aef482c5d3.png
[b04792584b264a26bc91dff604f4b20f.png]: https://img-blog.csdnimg.cn/b04792584b264a26bc91dff604f4b20f.png
[9ff160f5795840938cae1a7c17e1c9e4.png]: https://img-blog.csdnimg.cn/9ff160f5795840938cae1a7c17e1c9e4.png
[7d95788bd52041e5b2e28772a0af5e5e.png]: https://img-blog.csdnimg.cn/7d95788bd52041e5b2e28772a0af5e5e.png
[d271612cae7a4a1f91e5309af23533fb.png]: https://img-blog.csdnimg.cn/d271612cae7a4a1f91e5309af23533fb.png
[ca8b1c523c6e4e9c90e2f9342e4aa23b.png]: https://img-blog.csdnimg.cn/ca8b1c523c6e4e9c90e2f9342e4aa23b.png
[b0f27a1d13a84fe6b459bc94ef30c29f.png]: https://img-blog.csdnimg.cn/b0f27a1d13a84fe6b459bc94ef30c29f.png
[ecb71c3dcb0146eda082f0bbac8efe23.png]: https://img-blog.csdnimg.cn/ecb71c3dcb0146eda082f0bbac8efe23.png
[39fdda64593a4cddb6a47147db99257f.png]: https://img-blog.csdnimg.cn/39fdda64593a4cddb6a47147db99257f.png
[cf91161c8c4c49fc9e5f0e1828290ea0.png]: https://img-blog.csdnimg.cn/cf91161c8c4c49fc9e5f0e1828290ea0.png
[f8782749ec404f75856deeed51a76c2c.png]: https://img-blog.csdnimg.cn/f8782749ec404f75856deeed51a76c2c.png
[940a3eb128f44cadb115c9872aba6f2c.png]: https://img-blog.csdnimg.cn/940a3eb128f44cadb115c9872aba6f2c.png