我正在试图找出如何以及在哪里为react + redux + thunk中的选择框加载数据(即对我的操作调用调度)。我不确定它是否应该放在我的App容器的构造函数中,或者我应该将它加载到我的组件中(在我的示例中:“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类可能会增长很多,这是正确的方法吗?我不确定最佳实践是什么,因为我刚开始学习反应。
答案 0 :(得分:10)
您应该将数据组件与表示组件分开(请参阅帖子here)。
因此,在您的小示例中,MyDropdown
应该传递它所需的所有数据以呈现组件。这意味着在App中获取数据(或组件的某些父组件实际呈现视图。
由于您正在使用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中看到完整示例。