Question: How to listen Reflux store for a particular action? (ES6 way)

Question

How to listen Reflux store for a particular action? (ES6 way)

Answers 1
Added at 2016-05-28 12:05
Tags
Question

I have the following class

class MyComponent extends React.Component {

  constructor(props) {
      super(props);
      this.state = {}
  }

  componentDidMount() {
      this.unsubscribe = MyStore.listen((data) => this.onStoreChange(data));
  }

  componentWillUnmount() {
      this.unsubscribe()
  }
  ...
}

This component listens to all actions triggered from MyStore. Assume I want it to listen only to myAction, how can I do this in ES6 way?

Thank you

Answers
nr: #1 dodano: 2016-05-28 19:05

Components shouldn't listen to any actions - they usually listen to the change of data in the redux store.

If you'd like to make the component listen to only a specific change, use the connect function on it and map proper props from the store:

import React from 'react';
import {connect} from 'react-redux';
import * as actions from './actions';

class myComponent extends React.Component {
  // NOTE Component body ...

  render() {
    return <div>{this.props.importantProp}</div>;
  }
};

let mapStateToProps(state) => {
  // NOTE Lets say we care only about the `importantProp` from the state
  return {
    importantProp: state.prop1
  };
};

export default connect(mapStateToProps, actions)(myComponent);

With that setup, component will only update when any action changes the prop1 value in the store. Make sure no parent components are connected entirely to the store, otherwise the component will refresh with its parent, regardless the changes in the store.

Source Show
◀ Wstecz