[Question] "Mimic" Some Aspects of Relay about recompose

[hnordt]

Here is data fetching example I imagine:

import React from 'react';
import ReactDOM from 'react-dom';
import { compose, withState, mapProps } from 'recompose';

const Counter = ({ counter, getCount }) => (
  <p>
    {counter.isLoading ? 'Loading...' : (counter.data ? `Count: ${counter.data}` : null)}
    <button onClick={getCount}>Get Count</button>
  </p>
);

// Simulate backend
let count = 0;
const getCount = callback => {
  count++;
  setTimeout(() => callback(count), 1000);
};

const CounterContainer = compose(
  withState('counter', 'updateCounter', {}),
  mapProps(({ updateCounter, ...rest }) => ({
    getCount: () => {
      updateCounter({ isLoading: true });
      getCount(count => updateCounter({ data: count }));
    },
    ...rest
  }))
)(Counter);

ReactDOM.render(<CounterContainer />, document.getElementById('root'));

[acdlite]

Usually when you connect a component to an external data source, you need a subscription that is disposed when the component unmounts. Check out the lifecycle() helper

EDIT: Oops, linked to source instead of API docs

[hnordt]

@acdlite awesome.

So data fetching inside container components with Recompose is acceptable? I mean, it's scalable?

[acdlite]

I can't say for certain since I haven't tried it yet, but using lifecycle it shouldn't be any different than using constructor() and componentWillUnmount() directly, which is how data fetching in normal React classes usually works.