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 问题
相似问题