Idea for PromiseStateContainer about react-refetch HOT 5 CLOSED

I like the idea in general, but I'd like to see how well it works with PromiseStates, especially ones that are composed with PromiseState.all() and need to be decomposed on fulfillment. We use that pattern heavily to block on groups of fetches that should rendered together. This might also make it easier to allow for application provided defaults for the pending and error states. If you'd like to try making a PromiseState-specific version of this, it would at least be interesting thought experiment.

from react-refetch.

I'll use React Refetch on my projects, then I'll start the experiments with "HOCing".

Soon I'll post my thoughts.

from react-refetch.

@ryanbrainard I found a simple solution, I don't even need to change my code:

import React from 'react';
import { connect, PromiseState } from 'react-refetch';
import Async from '@hnordt/reax-async';
import ProjectPanel from './ProjectPanel.js';

const AsyncProjectPanel = Async(ProjectPanel);

const Projects = ({
  projectsFetch,
  likesFetch
}) => {
  const allFetches = PromiseState.all([userFetch, likesFetch]);
  return (
    <AsyncProjectPanel
      projects={projectsFetch.value}
      likes={likesFetch.value}
      isLoading={allFetches.pending}
      error={allFetches.reason} />
  );
};

export default connect(() => ({
  projectsFetch: '/api/projects.json',
  likesFetch: '/api/likes.json'
}))(Projects);

from react-refetch.

It works, but I personally don't like having to see the attributes of the PromiseState in all my components and also has duplication for the pending and error states. I like the HOC, but it should really be PS-specific to be used with Refetch IMHO. Perhaps a second-order HOC could even handle the application-specific defaults so something could be included (mostly) out of the box.

from react-refetch.

I'm going to close this for now since there's nothing really actionable here at this point. If you'd like to provide an HOC PromiseStateContainer, please open a pull request. It could even just a link in the readme to a gist, but bonus points if it can be a double HOC the incorporated application defaults and can be included in this library.

from react-refetch.