0

The title is no really clear but my question is pretty simple. I'm using flux pattern. I have an event handler inside a reactclass, this handler takes an input from the user. What I'm doing is taking this input and pass it to an action (then the action update stores and finally my state is updated).

handler(e) {
    var newParams = this.state;
    newParams.input = e.target.value;
    MyActions.someAction(newParams);
}

As you can see I want to pass the current state completed with the new input to an action. The problem is that if I'm doing this way I'm modify directly the current state without passing by setState and it's not advised at all. I don't want to use setState in my handler I want to use setState on store change.

So my question is am I compelled to use something like underscore _.clone() or is it a simpler way to do this I haven't seen ?

François Richard
  • 6,817
  • 10
  • 43
  • 78
  • Isn't your action received by the Store ? – Pierre Criulanscy Sep 01 '15 at 08:40
  • It is , I have no problem with this part, my problem is that writing var newParams = this.state then newParams.input = "//" I'm modifying directly this.state and this is not advised to do that without going through setState. My question is am I compelled to clone this.state – François Richard Sep 01 '15 at 08:43
  • If your Store receive the action, so it should emits change, you're state thus will be updated isn't it ? – Pierre Criulanscy Sep 01 '15 at 08:44
  • yes it working, forget the action this is not the issue. Maybe I didn't explain well. Writing this.state.some = "something"; is bad and how can I avoid that, actually this is more about javascript and cloning object than speciicaly a react question – François Richard Sep 01 '15 at 08:49
  • Yes I understand but what's the point of writing "this.state.some = something" in your handler if the state.some property will be set via Store when it will emit change ? Could you post the code of your Store and the "updating sate" part of your component ? – Pierre Criulanscy Sep 01 '15 at 08:50
  • I'm indirectly writing that because I need to pass the current state +the new input as a param – François Richard Sep 01 '15 at 08:51
  • Maybe I have no other choice than cloning var newParams = _.clone(this.state); So I don't modify it when I complete newParams with the input. – François Richard Sep 01 '15 at 08:53

1 Answers1

1

In the case you want to update the state first, then execute an action, you can leverage the setState callback:

handler(e) {
    this.setState({ input: e.target.value }, () => {
         MyActions.someAction(this.state);
    });
}

And yes, you need to create a new object, as what you are assigning is a reference. You have different ways to do so, other than _.clone:

gcedo
  • 4,811
  • 1
  • 21
  • 28
  • I could update the state first but it's pointless since it's gonna be done through store update but yeah I thought about that maybe I'll go this way probably less ugly than cloning. I'm validating your answer for the good link you provided;, Thank you :) – François Richard Sep 01 '15 at 09:13
  • You could use the [react immutability helpers](https://facebook.github.io/react/docs/update.html) – Clarkie Sep 01 '15 at 09:59