CODEWITHSUNDEEP
reactjsredux
Mathis Hüttl
Mathis Hüttl

Reputation: 137

Mix Redux Store with states

I have two questions - one about React & Redux and one about es6.

  1. Question: I am totaly new to React and Redux. I feel good with React but Redux is really difficult. I have a basic question how I should generally go further. I use the Material-UI Framework in my Test-Project and there I use the component. This component works with the onChange event and then it updates the this.state.value to display this value. But when I use Redux then I have to store everything in my store right? So is it wrong to store the current value of the in the this.state.value property?

2.Question: This snipped doesn't work, it tells me 'Unexpected token' in this Line:

handleChange = (event, index, value) => {
    this.setState({value});
};

///////////////////////////////////////////////////////////////////////////

export default class AddSterbefallForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {value: 10};
    }

    handleChange = (event, index, value) => {
        this.setState({value});
    };


    render() {
        return (
            <SelectField value="{this.state.value}" onChange         {this.handleChange}>
                <MenuItem value="Herr" key="m" primaryText="Herr" />
                <MenuItem value="Frau" key="w" primaryText="Frau" />
            </SelectField>
        );
    }
}

Upvotes: 1

Views: 748

Answers (1)

Mihir
Mihir

Reputation: 3902

As you said, you're new to Redux. What I would suggest you is to create Redux example projects on your own. You can find excellent examples here. When I was learning Redux, I studied each and every example and recreated the same projects on my own. That really helped!

Before you go on using Material UI framework in your project, you'll want to have a clear idea about what is Redux, why is it used and how is it used. Let me tell you that using Redux will not completely remove React's setState(). There is still some use of React's native state management.

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! I hope you'll learn Redux before diving into an awesome project! Good luck!

Upvotes: 2

Related Questions