CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxredux-form
Div
Div

Reputation: 11

Why using react state is not advisable(not considered best practice) when using redux in application

class Wrap extends Component{
  constructor(props) {
    super(props);
    this.state={
      index: 0,
      selectedIndex: 0
    };
  }
  getSelectedIndex(index){
    this.setState({selectedIndex: index});
  }

  switch(index) {
    case 0:
    <Apple selectedIndex={this.getSelectedIndex.bind(this)}/>;
    case 1:
    <Orange selectedIndex={this.state.selectedIndex}/>;
    case 2:
    <Pumpkin selectedIndex={this.state.selectedIndex}/>;
  }    
}

Here using selectedIndex in react state is not advised. It should be moved to redux store. Why is not best practice, when it is only required within the parent-child components.

Upvotes: 1

Views: 52

Answers (2)

Brion Mario
Brion Mario

Reputation: 111

It's better to have the application state in one place but often times it's really hard to avoid having local state in some components.

Upvotes: 0

sme
sme

Reputation: 4153

According to the official docs, using local state is fine, or you can put it all into the redux store. Its up to you and your project's needs.

Key things to consider here:

Some common rules of thumb for determining what kind of data should be put into Redux:

  • Do other parts of the application care about this data?

  • Do you need to be able to create further derived data based on this original data?

  • Is the same data being used to drive multiple components?

  • Is there value to you in being able to restore this state to a given point in time (ie, time travel debugging)?

  • Do you want to cache the data (ie, use what's in state if it's already there instead of re-requesting it)?

Upvotes: 2

Related Questions