remote-data-component v0.1.7

remote-data-component

A library to allow for better remote data UI managment.

Learn more: https://medium.com/unpacking-trunk-club/using-redux-and-redux-saga-to-handle-api-calls-18964d234660

Installation

npm install remote-data-component

Usage

RemoteDataT

This type signifies how remote data should be perceived in correlation to this package and it's components and functions

type RemoteDataT<D, E, M = any> =
  | { phase: 'NOT_ASKED', meta?: M }
  | { phase: 'PENDING', meta?: M }
  | { phase: 'SUCCESS', data: D, meta?: M }
  | { phase: 'ERROR', error: ?E, meta?: M }

Learn more about Union Types

Flow Typescript

RemoteDataComponent

This component allows a component to be rendered differently for different phases of remote data calls

import React from 'react'
import RemoteDataComponent from 'RemoteDataComponent'

class MyComponent extends React.Component {
  render() {
    const { MyDataOne, MyDataTwo } = this.props

    return (
      <RemoteDataComponent
        data={{ MyDataOne, MyDataTwo }}
        renderNotAsked={() => <Empty />}
        renderPending={() => <Loading />}
        renderError={() => <Error />}
        renderSuccess={data => (
          <Content one={ data.MyDataOne.data } two={ data.MyDataTwo.data } />
        )}
      />
    )
  }
}

onStateTransition

This utils function is meant to be called when some actions should be taken when a call transitions (eg. PENDING -> SUCCESS or PENDING -> ERROR)

import React from 'react'
import { onStateTransition } from 'RemoteDataComponent'

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    onStateTransition({
      prevState: prevProps.MyData,
      nextState: this.props.MyData,
      onSuccess: () => console.log('Success!')
      onError: () => console.warn('Error!')
    })
  }
}

remoteDataReducer

This utils function is meant to create a reducer function that facilitates the RemoteDataT API call concept

import { remoteDataReducer } from 'remote-data-component'

export default remoteDataReducer('MyData')