How to use redial - 10 common examples

loadDataDefered(components, params, location, routeProps) {
        // Get deferred data, will not block route transitions
        trigger('defer', components, {
            location,
            params,
            dispatch: this.props.store.dispatch,
            getState: this.props.store.getState,
            routeProps
        }).catch((err) => {
            if (process.env.NODE_ENV !== 'production') {
                console.error('There was an error when fetching data: ', err);
            }
        });
    }

import React, { Component } from 'react';
import { provideHooks } from 'redial';

@provideHooks({
  fetch: ({ setProps, getProps, force, isAborted }) => new Promise((resolve) => {
    const { color } = getProps();
    if(!color || force) {
      setTimeout(() => {
        if (isAborted()) {
          console.log('We should ignore this');
          return resolve();
        } else {
          console.log('Completed fine')
        }
        const getValue = () => Math.round(Math.random() * 255);
        setProps({color: `rgb(${getValue()}, ${getValue()}, ${getValue()})`});
        resolve();
      }, 2000);
    } else {
      resolve();

export const serverFetchData = (
  renderProps: Object,
  store: Object
): Promise =>
  trigger(
    FETCH_DATA_HOOK,
    renderProps.components,
    getDefaultParams(store, renderProps)
  );

createHandler(renderProps => {
      ReactDOM.render(, domNode);

      trigger(
        UPDATE_HEADER_HOOK,
        renderProps.components,
        getDefaultParams(renderProps)
      );
    })
  );

export const serverFetchData = (renderProps, store) =>
  trigger(FETCH_DATA_HOOK, renderProps.components, getLocals(store, renderProps));

}, async (error, redirect, renderProps) => {
      if (error) {
        ctx.status = 500
        reject(ctx.throw(error))

      } else if (redirect) {
        ctx.status = 302
        reject(ctx.redirect(`${redirect.pathname}${redirect.search}`))

      } else if (!renderProps) {
        ctx.status = 404
        reject()

      } else {
        await trigger('prefetch', renderProps.components, {
          dispatch: ctx.store.dispatch,
          location: renderProps.location,
          params: renderProps.params,
        })
        resolve()
      }
    })
  })

return async dispatch => {
      const { components } = renderProps;
      const locals = {
        dispatch,
        counterActionsCreator: this.actionsCreators.counter,
      };

      return trigger('fetch', components, locals);
    };
  }

return dispatch => {
      const { components } = renderProps;
      const locals = {
        dispatch,
        counterActionsCreator: this.actionsCreators.counter,
      };

      return trigger('defer', components, locals);
    };
  }

match({routes, location}, (error, redirectLocation, props = {}) => {
    const {components, params} = props;
    if (window.data) {
      delete window.data;
    } else {
      trigger('fetch', components, {store, params});
    }
  });
});

export async function getInitialState(
  components,
  { dispatch },
) {
  logger('getInitialState: Running prefetchers');

  try {
    await trigger('fetch', components, {
      dispatch,
    });
  } catch (e) {
    warning(false, e.message);
  } finally {
    logger('getInitialState: Done');
  }
}