Mix Redux Store with states

Question

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

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>
        );
    }
}

Possible duplicate of [React-Redux: Should all component states be kept in Redux Store](https://stackoverflow.com/questions/35328056/react-redux-should-all-component-states-be-kept-in-redux-store) — Michael Freidgeim, May 10 '19 at 21:40

score 2 · Accepted Answer · answered Aug 18 '16 at 07:26

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!

Tanks, thats a good tipp i will do this! But it's so hard, because in every example i the creator of the example did everything other that the example before.. there is no "right-way" there are too much "right-ways"! — Mathis Hüttl, Aug 18 '16 at 07:46
@MathisHüttl Yes, I relate to that! It was hard at first. Let me give you a goal. Learn until you're be able to use [this](https://github.com/mxstbr/react-boilerplate) boilerplate in one of your projects. Ciao~ — Mihir, Aug 18 '16 at 08:13

Mix Redux Store with states

1 Answers1