redux集成immutable的问题
来源:5-9 nextjs集成redux(2)

一度王爵吉尔伽美什
2019-05-16
老师您好,我想向您咨询一个问题。我先集成了 redux 和中间件 redux-saga,在首页的getInitialProps
函数中判断从store
里拿到的listData
数组为空,就dispatch
获取数据的action
,成功后存储到store
里,页面通过mapStateToProps
拿到listData
数组遍历展示,这一套流程是走通的。第一次访问直接呈现在服务端请求到的第1页的20条数据,接下来继续使用分页器操作也是正常的。
在此基础上,我引入了immutable
,使用对应的fromJS
和toJS
对store
做了处理,但是这时候运行页面,第一次进来的时候,首页没有展示数据。但是后续通过分页器继续操作,是一切正常的。我的想法是,这样的话,就可以排除我使用immutable
语法的错误了。问题应该是页面在服务端编译的时候,往store
里写数据产生的。经过调试,我发现,在getInitialProps
方法中,检测到listData
无数据,发送获取数据的action
,获取成功,一直到这一步,都是可以的;就是在success
后,往store
里写请求到的这20
条数据,出问题了,写不进去!store
里的listData
一直是一个空数组。通过immutable
语法往store
里插数据的代码是没问题的,因为页面加载完成后,“客户端”后续的操作也是走的这个action
,一切正常;只是在第一次加载页面,服务端编译的时候,写不到store
里去,因为这个时候页面还没有到达浏览器,所以浏览器端的调试工具看不到效果;所以我安装了redux-logger
中间件,打印日志看了一下,判断到listData
数据为空发送请求数据的action
一直到请求成功,拿到20条数据都是成功的;也dispatch
了成功对应的action
,payload
就是刚刚请求到的这20条数据,但是就是写不到store
里去。换成普通JS对象,就可以了;immutable
对象,就不行;但是immutable
对象,后续的“客户端”操作,也ok,只是第一次在服务端编译的时候不行,不知道老师有没有相关的经验?下面是一张redux-logger
的截图,可以看到,在拿到请求的数据以后,打印出来的next state
里的listData
,已经是有数据的数组了,但是在紧接着的log中,可以看到,又变成空数组了,我觉得问题应该就在这了。并且我在首页上查看页面源代码
,数据也是有的;只是store
里没有,不知道老师有没有什么猜想呀?
1回答
-
Jokcy
2019-05-17
你这个说得完全被你绕进去来。。。建议你建立一个最小化还原你的问题的demo,可以在codesandbox上写,或者放github上。
10
全栈进阶课程 React16.8+Next.js+Koa2一步到位开发Github
651 学习 · 311 问题
相似问题