應對redux和組件與容器的困境

Question

我想將代碼組織成components和containers文件夾結構。 我將Redux與動作和reducer一起使用。

您認為StartButton是組件還是容器？ 它不會連接到redux存儲，但是它具有自己的狀態和一些決策邏輯，因此它可能並不愚蠢...

我知道我的問題與觀點有關，但也許有人可以向我提供一些見解以及什么是最佳實踐。

這是我的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

在我的應用程序中， containers是指連接到Redux存儲的react組件。

所有其他components 。 例如，它們大多數都使用React狀態來切換UI內容。 很好。

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