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.