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

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

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

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

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

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

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

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

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

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

 JSON.parse(pagination ? pagination : null )

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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