Question: Reflux connect/trigger behavior change after upgrade

Question

Reflux connect/trigger behavior change after upgrade

Answers 1
Added at 2016-05-03 19:05
Tags
Question

I recently upgraded Reflux from v0.3.0 to v0.4.1

When I first tested my code after the update, the only change I had to make was to add a key to my component's Reflux.connect call.

However, I am experiencing some strange behavior:

var SomeActions = Reflux.createActions([
  'updateName'
]);

var SomeStore = Reflux.createStore({
  listenables: [SomeActions],
  init () {
    this.name = '';
    this.time = new Date();
  },
  getInitialState () {
    return {
      time: this.time
    }
  },
  onUpdateName (newName) {
    this.name = newName;
    this.trigger({
      name: this.name
    });
  }
});

var SomeComponent = React.createClass({
  mixins: [React.connect(SomeStore, 'someState')],
  componentDidMount () {
    SomeActions.updateName(this.props.name);
  },
  render () {
    console.log(this.state.someState);
    ...
  }
});

When the component first mounts the state is correct, containing just the time. However, upon the action being triggered, the state in now incorrect, containing just name. The behavior before upgrade was for trigger to simply add/update new keys into the state. Thus after the action triggers, I would have expected the state to contain both time and name.

Did I miss something during the update?

Answers
nr: #1 dodano: 2016-05-03 20:05

Ok I haven't used reflux before so I had to read their documentation. You are using the incorrect method for this.

var SomeComponent = React.createClass({
  mixins: [React.connect(SomeStore, 'someState')],
  ----------------^----------------
  componentDidMount () {
    SomeActions.updateName(this.props.name);
  },
  render () {
    console.log(this.state.someState);
    ...
  }
});

from the docs

If all you want to do is update the state of your component to whatever the data store transmits, you can use Reflux.connect(listener,stateKey)

so the data from the store is changing your whole components state.

you can specify what to update like this example from their docs.

var Status = React.createClass({
    mixins: [Reflux.listenTo(statusStore,"onStatusChange")],
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    render: function() {
        // render using `this.state.currentStatus`
    }
});

Or you can return the entire state of the store to the component in your trigger

DOCS

Source Show
◀ Wstecz