javascript - react-redux异步读取数据
巴扎黑
巴扎黑 2017-04-11 09:03:33
0
1
695

尝试写了个react+redux的博客系统,后端是express搭建,主要完成些增删改查,在前端获取数据的时候遇到了这么个情况。

前期未考虑周全,在页面开始加载时通过:

store.dispatch(getAllArticle())  //使用request向后台请求文章并更新store
store.dispatch(getAllCategory())   //使用request向后台请求分类列表并更新store
ReactDOM.render(
     <Provider store={store}>
       <p>
         <Router history={history} routes={AppRoutes} onUpdate={() => window.scrollTo(0,0)} />
       </p>
     </Provider>,document.getElementById('app')
    )

获取文章和分类,并将结果保存在store中,并通过Provider给组件。

随后在category组件中通过mapStateToProps绑定store中的category变量给组件,使用时发现category读取了三次,前两次为空,第三次才正确,如图:

发现是页面加载前的那两次dispatch搞的鬼。

想到的解决方法:

  1. 准备将store.dispatch(getAllArticle())、store.dispatch(getAllCategory())和ReactDOM.render放到Generator函数中依次执行

  2. 在store总添加个isLoading字段,各组件判断isLoading的状态然后再将组件的this.props.article和this.props.category渲染到页面中

  3. 将需要渲染state.article的view放到componentWillReceiveProps方法中,每次this.props.article和this.props.category更新重新渲染。

请问还有什么更好的方法吗?

巴扎黑
巴扎黑

Antworte allen(1)
大家讲道理

不是挺正常的吗?前两次空有什么问题?数据没拿到前,界面做相应显示就好。

你那个解决办法:
1是没有必要的,数据没拿到钱,界面完全无法显示;
2有必要,根据加载状态做相应显示;
3没有必要,除非拿到的数据需要缓存到state中,一般是格式不同,而又不想在render里面产生太大开销才这么做。否则没有必要多此一举,直接从props中拿就行了(用react-redux的connect注入进来)。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage