redux集成immutable的问题

来源:5-9 nextjs集成redux(2)

一度王爵吉尔伽美什

2019-05-16

老师您好,我想向您咨询一个问题。我先集成了 redux 和中间件 redux-saga,在首页的getInitialProps函数中判断从store里拿到的listData数组为空,就dispatch获取数据的action,成功后存储到store里,页面通过mapStateToProps拿到listData数组遍历展示,这一套流程是走通的。第一次访问直接呈现在服务端请求到的第1页的20条数据,接下来继续使用分页器操作也是正常的。图片描述
在此基础上,我引入了immutable,使用对应的fromJStoJSstore做了处理,但是这时候运行页面,第一次进来的时候,首页没有展示数据。但是后续通过分页器继续操作,是一切正常的。我的想法是,这样的话,就可以排除我使用immutable语法的错误了。问题应该是页面在服务端编译的时候,往store里写数据产生的。经过调试,我发现,在getInitialProps方法中,检测到listData无数据,发送获取数据的action,获取成功,一直到这一步,都是可以的;就是在success后,往store里写请求到的这20条数据,出问题了,写不进去!store里的listData一直是一个空数组。通过immutable语法往store里插数据的代码是没问题的,因为页面加载完成后,“客户端”后续的操作也是走的这个action,一切正常;只是在第一次加载页面,服务端编译的时候,写不到store里去,因为这个时候页面还没有到达浏览器,所以浏览器端的调试工具看不到效果;所以我安装了redux-logger中间件,打印日志看了一下,判断到listData数据为空发送请求数据的action一直到请求成功,拿到20条数据都是成功的;也dispatch了成功对应的actionpayload就是刚刚请求到的这20条数据,但是就是写不到store里去。换成普通JS对象,就可以了;immutable对象,就不行;但是immutable对象,后续的“客户端”操作,也ok,只是第一次在服务端编译的时候不行,不知道老师有没有相关的经验?下面是一张redux-logger的截图,可以看到,在拿到请求的数据以后,打印出来的next state里的listData,已经是有数据的数组了,但是在紧接着的log中,可以看到,又变成空数组了,我觉得问题应该就在这了。并且我在首页上查看页面源代码,数据也是有的;只是store里没有,不知道老师有没有什么猜想呀?图片描述
图片描述

写回答

1回答

Jokcy

2019-05-17

你这个说得完全被你绕进去来。。。建议你建立一个最小化还原你的问题的demo,可以在codesandbox上写,或者放github上。

1
0

全栈进阶课程 React16.8+Next.js+Koa2一步到位开发Github

学习React/Next.js服务端渲染SSR同构设计方案,理解OAuth登录体系的实现原理

651 学习 · 311 问题

查看课程