我试图弄清楚如何以及在哪里为react + redux + thunk中的选择框加载数据(即在我的操作上调用调度)。我不确定它是否应该放入我的应用程序容器的构造函数中,或者我应该将其加载到我的组件中(在我的示例中:“MyDropdown”)
我的主要应用程序:
import MyDropdown from '../components/mydropdown';
// Should i import my action here and then...
// import { loadData } from '../actions';
class App extends Component {
render() {
return (
<div className="page-content">
<div className="option-bar">
// SEND it as a PROP inside MyDropdown...
<MyDropdown />
</div>
</div>
);
}
}
export default App;
我的组件
// OR.. Should i load it in my MyDropdown component here?
import { loadData } from '../actions';
class MyDropdown extends Component {
// If i load it here on load, how do i do it?
render() {
return(
<select>
{renderOptions()}
</select>
);
}
}
我在我的 App 类中尝试了 componentDidMount() ,但它似乎不起作用。将初始化数据和对操作的调用放在那里似乎是有意义的,因为它将全部集中,而不是在我的子组件中调用操作。另外,我将有多个需要在启动时加载的选择框,因此我的 App 类可能会增长很多,这是正确的方法吗?我不确定最佳实践是什么,因为我才刚刚开始学习 React。
最佳答案
您应该将数据组件与表示组件分开(请参阅帖子 here )。
因此,在您的小示例中,应向 MyDropdown
传递渲染组件所需的所有数据。这意味着要获取 App 中的数据(或实际渲染 View 的组件的某些父组件)。
由于您正在使用 React 和 Redux,因此 react-redux库提供了一个辅助函数来生成容器,以获取演示组件所需的数据。
为此,请将 App
更改为:
import { connect } from 'react-redux'
import MyDropdown from '../components/mydropdown';
import { loadData } from '../actions';
// This class is not exported
class App extends Component {
componentDidMount() {
this.props.loadData()
}
render() {
return (
<div className="page-content">
<div className="option-bar">
<MyDropdown data={this.props.data}/>
</div>
</div>
);
}
}
function mapStateToProps(state) {
const { data } = state
return {
data
}
}
function mapDispatchToProps(dispatch) {
return {
loadData(){
dispatch(loadData())
}
}
}
// Export a container that wraps App
export default connect(mapStateToProps, mapDispatchToProps)(App);
或者,您可以保持 App
不变,并将 MyDropdown
更改为:
import { connect } from 'react-redux'
import { loadData } from '../actions';
// Exporting this allows using only the presentational component
export class MyDropdown extends Component {
componentDidMount() {
this.props.loadData()
}
render() {
return(
<select>
{renderOptions(this.props.data)}
</select>
);
}
}
function mapStateToProps(state) {
const { data } = state
return {
data
}
}
function mapDispatchToProps(dispatch) {
return {
loadData(){
dispatch(loadData())
}
}
}
// By default, export the container that wraps the presentational component
export default connect(mapStateToProps, mapDispatchToProps)(MyDropdown);
在这两种情况下,请查看最后实际默认导出的内容。这不是组件;而是组件。这是connect
的返回。该函数包装您的展示组件并返回一个容器,该容器负责获取数据并调用展示组件的操作。
这为您提供了所需的分离,并允许您灵活地使用演示组件。在任一示例中,如果您已经拥有渲染 MyDropdown
所需的数据,则可以仅使用演示组件并跳过数据获取!
您可以在 Redux 文档 here 中看到完整的示例.
关于reactjs - 使用异步数据初始化组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37339257/