javascript - React 与 redux 和组件与容器的困境

Question

我想将我的代码组织成components 和containers 文件夹结构。我将使用 Redux 和 actions 和 reducers。

您认为 StartButton 更像是组件还是容器？它不会连接到 redux store，但它有自己的状态和一些决策逻辑，所以也许它不是那么愚蠢......

我知道我的问题与意见有关，但也许有人可以为我提供一些见解和最佳实践。

这是我的 StartButton 组件:

import React, { Component } from 'react';
import RaisedButton from 'material-ui/RaisedButton';

import './style.css';

class StartButton extends Component {
  constructor() {
    super();

    this.state = {
      startWasClicked: false,
    };
  }

  handleStartButton = () => {
    this.setState({ startWasClicked: true });
  };

  beerListingView() {
    if (this.state.startWasClicked) {
      return <div>YES! It was clicked!</div>;
    }
    // Else return just single <div />
    return <div />;
  }

  render() {
    return (
      <div>
        <div className="StartButton-container">
          <RaisedButton
            label="Start Here"
            className="StartButton-main"
            onClick={this.handleStartButton}
          />
        </div>
        {this.beerListingView()}
      </div>
    );
  }
}

export default StartButton;

Answer 1

在我的应用程序中，容器 指的是连接到 Redux 存储的 React 组件。

components 是所有其他的。例如，它们中的大多数使用 React 状态来切换 UI 内容。很好。

查看 https://github.com/react-boilerplate/react-boilerplate例如