Chaining / combining ready-made connect functions?

[clarabstract]

So, it turns out it is very handy and useful to just provide ready-made connect functions for some common use cases.

For example, our data fetching and caching subsystem provides it's own version of connect() that works exactly like the react-redux connect, except it can look at the output of mapStateToProps and if the values are instances of some special data-fetching-definition objects the same subsystem provides, it knows how to setup the initial data fetch and subsequent updates by passing through dispatch from mapDispatchToProps to mergeProps and so forth.

The problem is in order to do this we had to look at and re-implement connect's internal handling of mapStateToProps, mapDispatchToProps and mergeProps. This is brittle - we have to rely on keeping the re-implemented behavior in sync with you, even though this is a simple matter so far.

The problem actually gets worse the more of these ready-made connect functions we want to implement. There is a relatively simple connectForm I wish to add to easily hook-up forms to our form handling subsystem. It just maps a well known area of the redux state (looking up forms by name) to a form's field prop, and does a straight-forward map of form-related action creators to their respective event props. This should be trivial, but isn't, again, because we have to re-implement all that default functionality and carefully merge in the handful of things we want to do.

And worst of all the system breaks down entirely when trying to combine the two (e.g. a form that also needs to fetch its data) - it simply cannot be done.

The approach I have in mind is to pass in the connect function the custom-connects call internally as a 5th argument, but this feels like it's slowly getting out of hand.

Surely there can be a more well thought out composition mechanism provided by react-redux itself? I have some thoughts on how that could look but before I go down that road I'm wondering if there is existing work towards this, or if I'm missing a much more straight-forward way of solving these kinds of problems.

[jimbolla]

Can you provide a more concrete example? Also, take a look at the codebase in the next branch of react-redux, which is rearchitected to be more customizable.

[clarabstract]

Actually, soon after I wrote this it occurred to me composition can be made trivial by applying the HoC factory returned by all these connects to each-other.

E.g.

let ConnectedSomeFormComponent = connectForm(formName)(connectDataFetch(dataFetchMapper)(connect(regularMapStateToProps, regularMapDispatchToProps)(SomeFormComponent)));

Sure it looks a bit ugly but I think that should work OK? And there is no real need for the custom connects to support the same mapStateToProps etc arguments as the regular connect - one just needs to wrap a component with both.

[esamattis]

I've used successfully flow and compose from lodash to combine HOCs.

import {flow} from "lodash/fp";

let ConnectedSomeFormComponent = flow(
  connectForm(formName),
  connectDataFetch(dataFetchMapper),
  connect(regularMapStateToProps, regularMapDispatchToProps)
)(SomeFormComponent);

[clarabstract]

Re concrete example, here is the "trivial" implementation of connectForm that cannot be extended or combined:

import {connect} from 'react-redux';

import updateFieldValue from './updateFieldValue';
import commitFieldValue from './commitFieldValue';
import fieldWasValidated from './fieldWasValidated';

export default function connectForm(formName) {
  let mapStateToProps = (typeof formName === 'function'
    ? ({forms}, props) => {
      let formName = formName(props);
      let fieldData = formName in forms ? forms[formName] : {};
      return {formName, fieldData};
    }
    : ({forms}) => ({
      formName: formName,
      fieldData: formName in forms ? forms[formName] : {}
    })
  );
  return connect(
    mapStateToProps,
    {
      onUpdateFieldValue: updateFieldValue,
      onCommitFieldValue: commitFieldValue,
      onFieldWasValidated: fieldWasValidated,
    }
  );
}

// used like this
let ConnectedEditForm= connectForm(
  ({editObj}) => editObj ? `editForm.${editObj .id}` : `createNewObj`
)(EditForm);

... except, as I said above, it actually could be composed, like so:

let ConnectedEditForm= connectForm(
  ({editObj}) => editObj ? `editForm.${editObj .id}` : `createNewObj`
)(connect(regularMapStateToProps, ...etc)(EditForm));

[markerikson]

FYI, you can use the compose utility to combine those together in a more readable form:

const combinedHOC = compose(
    connectForm(formName),
    connectDataFetch(dataMapper),
    connect(mapState, mapDispatch)
);

export default combinedHOC(MyComponent);

[clarabstract]

Ahhhhhhhh - thank you @markerikson, it never occurred to me that it had applications for HoCs as well, not just middlewares :)

[markerikson]

Amusingly, @epeli pointed it out at the exact same time I did, just right before your "concrete example" comment :)

[jimbolla]

I was typing it too and then your answers came in. ;)

[clarabstract]

Right, thank you all :)

Out of curiosity, given this seems to be a good and popular solution, what is the use case for the split up connect implementation in the next branch? Or is it just an internal clean-up?

[jimbolla]

If you're curious, #407 and #416 contain the info dump for the refactorings.

[markerikson]

See #407 and #416 for the gory details, but it's basically a complete reimplementation to improve performance and fix edge cases. Courtesy of @jimbolla .

[markerikson]

Okay, people, we have GOT to stop simul-posting... :)

[esamattis]

For me the most important thing is that it allows to write custom connect()s easily. Shameless self promotion: https://github.com/epeli/lean-redux

[j18ter]

Coming to this a bit late, but here is my question. I understand the compose approach, and this works in many cases, but what if I don't want to write three separate functions that return bits and pieces of the props. How would one combine these wrapping functions in a way that takes a single function to compute the props? Let me give a concrete example, say I want to combine react-redux's connect and react-meteor-data's withTracker wrapping functions, Using compose I would do it this way:

const combinedHOC = compose (
    withTracker(mapCollectionsToProps),
    connect(mapState, mapDispatch)
);

Not only do I need to write three separate functions mapCollectionsToProps, mapState, and mapDispatch, the mapCollectionsToProps function receives props, but not state as argument. This function may want to access state too. I guess a similar question is why does connect need two separate functions, one to map state and a separate function to map dispatch to props, instead of just a single function that receives both state and dispatch as arguments?