我在react-redux网站上遇到了一个重复的模式:
组件显示来自Web api的数据,并且应该在加载时自动填充,无需任何用户交互。
组件显示来自Web api的数据,并且应该在加载时自动填充,无需任何用户交互。
我想从容器组件启动异步提取,但据我所知,唯一的方法是从显示组件中的生命周期事件。这似乎使得无法将所有逻辑放在容器中,只使用哑无状态功能组件进行显示。
这意味着我不能将无状态功能组件用于任何需要异步数据的组件。这似乎不对。
似乎“正确”的方法是以某种方式从容器启动异步调用。然后当调用返回时,状态将被更新,容器将获得新状态,然后通过mapStateToProps()将它们传递给其无状态组件。
在mapStateToProps和mapDispatchToProps中进行异步调用(我的意思是实际调用异步函数,而不是将其作为属性返回)没有意义。
所以我最终做的是将异步调用放在mapDispatchToProps()公开的refreshData()函数中,然后从两个或多个React生命周期方法中调用它:componentDidMount和componentWillReceiveProps。
有没有一种干净的方法来更新redux存储状态而不在每个需要异步数据的组件中放入生命周期方法调用?
我是否应该将这些调用放在组件层次结构的更高位置(从而减少此问题的范围,因为只有“顶级”组件需要监听生命周期事件)?
编辑:
就这样,我对connect()ed容器组件的意思没有任何混淆,这是一个非常简单的例子:
import React from 'react'; import { connect } from 'react-redux'; import {action} from './actions.js'; import MyDumbComponent from './myDumbComponent.jsx'; function mapStateToProps(state) { return { something: state.xxxreducer.something }; } function mapDispatchToProps(dispatch) { return { doAction: ()=>{dispatch(action())} }; } const MyDumbComponentContainer = connect( mapStateToProps,mapDispatchToProps )(MyDumbComponent); // Uh... how can I hook into to componentDidMount()? This isn't // a normal React class. export default MyDumbComponentContainer;
Jamie Dixon写了一个包来做这个!
https://github.com/JamieDixon/react-lifecycle-component
用法看起来像这样:
const mapDispatchToProps = { componentDidMount: getAllTehDatas } ... export default connectWithLifecycle(mapStateToProps,mapDispatchToProps)(WrappedComponent)