简体   繁体   中英

React with redux and component vs. container dilemma

I want to organize my code into components and containers folder structure. I will be using Redux with actions and reducers.

What do you think that StartButton is rather component or container? It will not be connected to the redux store, but it has its own state and some decision logic, so maybe it isn't so dumb...

I know my question has something to do with opinions, but perhaps someone can provide me with some insights and what's regarded as best practice.

Here's my StartButton component:

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;

In my apps, containers refer to react components that are connected to the Redux store.

components are all the others. Most of them make use of the React state to toggle UI stuff for example. Thats perfectly fine.

Check out https://github.com/react-boilerplate/react-boilerplate for example

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM