Question

我有一个容器，它将props和apiCall动作传递给一个组件，该组件主要只渲染该调用的结果。我的问题是，我应该将该操作的调用留给组件，还是将其移出到容器中，然后将项目数组传递给组件？

这是我的容器代码。 fetchShowingsListShowings是有问题的。此外，我将很快重命名，所以请耐心等待。

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/showingsListActions';
import ShowingsList from '../components/ShowingsList';

const ShowingsListContainer = (props) => {
  return (
    <ShowingsList
        isLoading={props.isLoading}
        showings={props.showings}
        fetchShowingsListShowings={props.actions.fetchShowingsListShowings}
    />
  );
};

ShowingsListContainer.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  showings: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
};

const mapStateToProps = (state) => {
  return {
    isLoading: state.showingsList.isLoading,
    showings: state.showingsList.showings
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ShowingsListContainer);

我的组件。它调用componentWillMount上的API操作。

import React, { PropTypes } from 'react';
import ShowingsListItem from './ShowingsListItem';

class ShowingsList extends React.Component {
  componentWillMount() {
    this.props.fetchShowingsListShowings();
  }

  render() {
    return (
      this.props.isLoading ? <h1>Loading...</h1> :
      <ul className="list-unstyled">
        {this.props.showings.map((showing,index) => <ShowingsListItem showing={showing} key={'showing' + index}/>)}
      </ul>
    );
  }
}

ShowingsList.propTypes = {
  isLoading: PropTypes.bool.isRequired,
  showings: PropTypes.array.isRequired,
  fetchShowingsListShowings: PropTypes.func.isRequired   
 };

export default ShowingsList;

提前致谢。

Answer 1

所以在React with Redux中，术语“容器”＃39;只是意味着一个连接到商店的组件，基本上无论你使用何种反应 - 还是连接＆＃39;方法用。你的ShowingsList可能是一个“愚蠢的”。（或功能）组件意味着它只是一个接收数据和显示内容的组件。一般＆＃39;最佳＆＃39;实践是让您的哑组件只关注表示，并且容器组件处理与Redux Store交互的所有逻辑。如果遵循此逻辑，则获取容器中的数据，并将数据传递给嵌套组件。话虽这么说，它会以任何一种方式工作，所以如果你现在对它感到满意，你真的不需要改变任何东西。

要遵循这种模式，请执行以下操作：

将您的Container组件修改为ES6类extends React.Component ..并可选择将您的ShowingsList更改为功能组件（就像您的ShowingsList现在一样）
在您的Container中放置一个componentWillMount并将API调用放在那里。
将列表传递给演示组件。

这是Redux关于这个话题的作者Dan Abramov写的一篇文章。 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.g695y2gwd

想知道在哪里容纳api调用逻辑。容器或组件内？

1 个答案: