connect-redux

Simplified Redux connect for React.

warning - proof of concept

Removes the useless mapStateToProps/mapDispatchToProps functions. Connect listens to the smallest possible state automatically.

Goals of this library are:

• [x] Reduce boilerplate.
• [x] Make a destinction between props that come from Redux and those that come from a parent.
• [x] Move selectors/dispatch functions to the top of the render function. No more jumping around the code, it flows top-down again.
• [x] Migrating from react-redux is easy, just move maps into render functions. Works with react-redux Provider, so your app can use both at the same time.
• [ ] Support browsers without Proxy (IE11). It's not hard and performance wouldn't be impacted much, I just don't need to support IE11 myself, so was too lazy to implement it :)
• [ ] Correct typescript types

Install

npm install connect-redux

Examples:

import connect from "connect-redux";

const ComponentName = (redux, props, context) => <div>{redux.count}</div>;

// no more mapStateToProps, listens only to the state that was used in the component
export default connect(ComponentName);

Redux object is your state tree + a hidden dispatch function:

import connect from "connect-redux";
import { Increment } from "./actions";

const ComponentName = redux => (
  <button onClick={e => redux.dispatch(Increment)} />
);

// no more mapDispatchToProps
export default connect(ComponentName);

The dispatch function is non-enumerable, so it won't show up in Object.keys(redux), only your state will.

Now you probably are saing that you liked the cleanness of mapStateToProps and mapDispatchToProps. Well, you can do exaxtly the same inside render:

import connect from "connect-redux";
import { Increment } from "./actions";

const ComponentName = (redux, props, context) => {
  // same as mapStateToProps:
  const count = redux.count;
  // call any selector here

  // same as mapDispatchToProps:
  const onClick = e => redux.dispatch(Increment);

  return (
    <div>
      {count}
      <button onClick={onClick} />
    </div>
  );
};

export default connect(ComponentName);

No more jumping around components and functions trying to find where something comes from!

You can also use classes with connect:

import connect from "connect-redux";
import { Increment } from "./actions";

class ComponentName extends React.Component {
  onClick = e => this.redux.dispatch();

  render() {
    <div onClick={this.onClick}>{this.redux.counter}</div>;
  }
}

export default connect(ComponentName);

Authors

by @skoomacowboy