使用redux，反模式时，在react叶子组件中设置this.state？ 优点/缺点

Question

Is setting and keeping the state in a Leaf component that doesn't ever touch Redux an antipattern?

For example, suppose a project has a leaf node with some states like modalIsOpen and buttonIsDisabled and countOfObjects .

This leaf node has functions that keep track of these states and modifies them as necessary. In this way, it's a simple react component before Redux came along. It's completely modular and reusable since you don't have to reimplement any Redux Actions such as a toggleModal function that you would need to connect to your component if you were to throw this component in another project. (Let's assume no other components need these simple states)

So given this example, is this an antipattern? What are the benefits and disadvantages of doing it this way? I want to assess any benefits + disadvantages before I decide if I want to make my leaf nodes like this.

Answer 1

It's not an antipattern. You can use state in Leaf components if it's affects only on visual template of component and not related to some shared data. So, do not be very fanatic about Redux patterns and React-ways. Write elegant and readable code, which can be supported by you and your teammates after the time, and make a product))

Answer 2

Absolutely not! Redux is great for managing application data, but when it comes to managing UI related state such as "active" class, it's advised that you use React's native state.

For example- If you want to store state of a button, if it is enabled or disabled, you won't necessarily need Redux for that! You can still use React's native state. Like this-

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      active: true
    };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      active: !this.state.active
    });
  }

  render() {
    return (
      <div>
        <button disabled={this.state.active} onClick={this.toggle}>
          {this.state.active ? 'Click me!' : 'You cannot click me'}
        </button>
      <div>
    );
  }
}

See? You don't need Redux here at all! Good luck!