React-redux-meteor: React data binding to Meteor and Redux

This is a package that extended from the react official package react-redux. If you are a Redux fan and want to have an easy way binding Meteor subscriptions or other Tracker reactive data, please try react-redux-meteor.

$ npm install react-redux-meteor --save

Basically react-redux-meteor has one more argument mapTrackerToProps in connect().
You will be able to inject Tracker data into React components as props.
Note that Tracker props are NOT stored in Redux store because they are client read-only and reactive. You can change Tracker props by calling Meteor methods.

const mapTrackerToProps = (state, props) => {
  if (Meteor.subscribe('posts').ready()) {
  return { posts: Posts.find().fetch() };
  }
  return { posts: [] };
};

const mapStateToProps = (state, props) => {
  return {
  // ...
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
  // ...
  };
};

export default connect(
  mapTrackerToProps,
  mapStateToProps,
  mapDispatchToProps
)(PostList);

If you don’t want to use Tracker data as props, just put null for the first argument

export default connect(
  null,
  mapStateToProps,
  mapDispatchToProps
)(PostList);

Q & A

Why not use createContainer in Meteor tutorial?

If you use createContainer and connect for react-redux, you have to create containers twice. It might affect (Not sure) the performance. But with react-redux-meteor, you will only create container once.

Why not use react-komposer?

The purpose of developing react-redux-meteor is for the users who are already familiar with react-redux. It just adds a parameter to connect() and very easy to use. However, if you never use react-redux, you can try either of them. react-komposer is also a good choice.

Will react-redux-meteor be merged to react-redux?

No. Because react-redux-meteor uses Tracker behind the scene which is especially for Meteor. However, if the official react-redux has updates, I will merge the updates into react-redux-meteor.

6 Likes

Looks great! I don’t think this will change anything about performance, but it does look nicer to use for people, especially since you can easily use Redux state in your subscription arguments.

Thanks. That’s what I want this package to achieve. Once any Redux state or props from parent changes, the mapTrackerToProps will re-run to bind latest data to the component.

1 Like