Dispatcher React Component

Install

React version below 16.8:

yarn add @naveteam/[email protected]

React version above 16.8:

yarn add @naveteam/dispatcher

Usage

Without hooks

import Dispatcher from '@naveteam/dispatcher'

const MyComponent = () => (
  <Dispatcher dispatch={() => fetch('https://jsonplaceholder.typicode.com/todos/1')}>
    {({isLoading, content, hasError, reload}) => (
    !isLoading
        ? <div>
            {JSON.stringify(content)}
        </div>
        : <span>loading...</span>
    )}
  </Dispatcher>
)

With hooks

import { useDispatcher } from '@naveteam/dispatcher'

const MyComponent = () => {
    const [isLoading, error, content, reload] = useDispatcher(() => fetch('https://jsonplaceholder.typicode.com/todos/1'))

    if (isLoading) {
        return (
            <span>loading...</span>
        )
    }

    if (error) {
        <span>{JSON.stringify(error)}</span>
    }

    return (
        <div>
            <p>{JSON.stringify(content)}</p>
            <button onClick={reload}>reload</button>
        </div>
    )
}

Component Props

Prop	value	Example	Required
dispatch	function that returns a promise	() => myPromise()	yes
shouldUpdate	Comparison of props to trigger shouldComponentUpdate	<Dispatcher lastId={'0'} shouldUpdate={prevProps => prevProps.lastId !== lastId}>{...}</Dispatcher>	no
errorCallback	function triggered when an request error occurs	error => console.log(error)	no

Render Props

Prop	Explanation	Default Value
isLoading	Boolean indicating request has finished	true
content	value of finished promise	null
hasError	boolean indicating if request failed	false
reload	calls dispatch function

Contribute

Run yarn dev

Edit index.js and App.js inside src folder