Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
RenderProps challenges
// Using RenderProps (https://github.com/ReactTraining/react-subjects/blob/master/subjects/RenderProps/exercise.js),
// how can I:
//
// 1) compose multiple fetches to be run simultaneously? In the example below, fetching credits would be blocked until
// debits have been fetched.
//
// 2) test the component without the fetches happening? Normally I'll have a component that takes props, and connect it
// to redux, and export both the connected component (as default) and the so-called presentational component as a named
// const. This allows me to preview the render using e.g. React Storybook.
class App extends React.Component {
render() {
return (
<div className="accounting-dashboard">
<h1>Debits and credits, ordered by date</h1>
<Debits>
{({ debits }) => (
<Credits>
{({ credits }) => {
const orderedTransactions = _.orderStuffByDate(debits, credits)
return orderedTransactions.map(t => <div>Amount: {t.amount}</div>)
}}
</Credits>
)}
</Debits>
</div>
)
}
}
@ryanflorence

This comment has been minimized.

Copy link

commented Nov 29, 2016

  1. Just depends on how Debits and Credits are implemented. The way I would do them they'd be fetching in parallel:
<Debits>
  {({ debits, error:debitsError }) => (
    <div>
      {/*
        This renders immediately, while fetching, so you can display a spinner
        or whatever, for example:
      */}

      {debits == null && <p>Loading Debits...</p>}

      {/*
        That also means `Credits` can start loading too. In this way, the
        hierarchy can be a bit deceiving, since there's no actual hierarchical
        relationship between the two.
      */}

      <Credits>
        {({ credits, error:creditsError }) => (
          credits ? (
            <div>{credits.map(renderCredit)}</div>
          ) : (
            <div>Loading credits</div>
          )
        )}
      </Credits>
    </div>
  )}
</Debits>

// My render would look something like this:

<Debits>
  {({ debits, error:debitsError }) => (
    <Credits>
      {({ credits, error:creditsError }) => (
        debits && credits ? (
          <Ledger credits={credits} debits={debits}/>
        ) : debitsError || creditsError ? (
          <div>
            {debitsError && <Error error={debitsError}/>}
            {creditsError && <Error error={creditsError}/>}
          </div>
        ) : (
          <Spinner/>
        )
      )}
    </Credits>
  )}
</Debits>

And then for 2 you'd just test <Ledger/> same idea. These "fetch" components fetch state, and then you can render your "presentational" components. No screwing around w/ connect and exporting multiple things though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.