How to use the redial.provideHooks function in redial

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();

import { connect } from 'react-redux';
import Wrapped from '../IndexPage';
import { provideHooks } from 'redial';
import { getPersons, deletePerson } from '../../ducks/person';
import { compose } from 'recompose';

export default compose(
  connect(
    state => ({
      persons: state.person.get('persons'),
    }),
    dispatch => bindActionCreators({
      deletePerson,
    }, dispatch)
  ),
  provideHooks({
    fetch: ({ dispatch }) => dispatch(getPersons()),
  })
)(Wrapped);

<p>{ movie.year }</p>
        <p>{ movie.description }</p>
        <p>{ movie.director }</p>
        <p>
          {t('Back to the list of movies')}
        </p>
      
    
  
);

export default compose(
  withStyles(styles),
  translate(),
  withRouter,
  provideHooks({
    fetch: ({ dispatch, params, setProps }) =&gt; dispatch(fetchMovie(params.id)).then((response) =&gt; {
      setProps({
        movieId: response.payload.result,
      });
    }),
  }),
  connect((state, ownProps) =&gt; ({
    movie: getMovie(state, ownProps.movieId),
  })),
)(MoviesDetailsPage);

<div>
           onMovieCardClick(movie)} /&gt;
        </div>
      ))}
    
    <div>
      <button>{t('Add new movie')}</button>
    </div>
  
);

export default compose(
  withStyles(styles),
  translate(),
  withRouter,
  provideHooks({
    fetch: ({ dispatch, setProps }) =&gt; dispatch(fetchMovies()).then((response) =&gt; {
      setProps({ moviesIds: response.payload.result });
    }),
  }),
  connect((state, ownProps) =&gt; ({
    movies: getMovies(state, ownProps.moviesIds || []),
  })),
  withHandlers({
    onMovieCardClick: ({ router }) =&gt; (movie) =&gt; {
      router.push(`/movies/${movie.id}`);
    },
  })
)(MoviesListPage);

import { loadTopRepo, setQuery, search } from 'store/github/github'


const redial = {
  fetch: ({ dispatch }) => dispatch(loadTopRepo()),
}

const mapStateToProps = ({ github }) => ({
  list: github.repoList,
  query: github.query,
  foundCount: github.totalFoundCount,
  loading: github.loading,
})

const enhance = compose(
  provideHooks(redial),
  connect(mapStateToProps),
  withHandlers({
    updateQuery: ({ dispatch }) => ({ target: { value } }) => dispatch(setQuery(value)),
    startSearch: ({ dispatch }) => () => dispatch(search()),
    onInputKey: ({ dispatch }) => event => event.key === 'Enter' && dispatch(search()),
  }),
)

const Github = ({ list, updateQuery, query, startSearch, loading, onInputKey }) => (
  
    
      <h1>Github API usage</h1>
      
        <input value="{query}">
        <button>Search</button>

marginTop: 10,
    marginBottom: 10,
  },
}

const redial = {
  fetch: ({ dispatch }) => Promise.all([
    dispatch(actions.setNumber(Math.floor(Math.random() * 90) / 10)),
    dispatch(actions.showNumber()),
  ]),
}

const enhance = compose(
  useSheet(styles),
  connect(({ home }) => ({ home }), actions),
  provideHooks(redial),
)

const Home = ({ home: { number, show }, sheet: { classes } }) => (
  <div>
    <h4>Home page</h4>
    To base
    {show &amp;&amp; <div>Number: {number}</div>}
  </div>
)

Home.propTypes = {
  home: PropTypes.object,
  sheet: PropTypes.object,
}

export default enhance(Home)

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

@provideHooks({
  fetch: ({ setProps, getProps, force }) => new Promise((resolve) => {
    const { color } = getProps();
    if (!color || force) {
      setTimeout(() => {
        const getValue = () => Math.round(Math.random() * 255);
        setProps({ color: `rgb(${getValue()}, ${getValue()}, ${getValue()})` });
        resolve();
      }, 1000);
    } else {
      resolve();
    }
  }),
})
export default class Header extends Component {
  render() {
    return (

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

@provideHooks({
    fetch: (locals) => new Promise((resolve) => {
        if (locals.force || !locals.getProps()) {
            setTimeout(() => {
                locals.setProps({color: 'blue'});
                resolve();
            }, 2500);
        } else {
            resolve();
        }
    }),
    defer: (locals) => {
        locals.setProps({color: 'red'});
        locals.dispatch({ type: 'CLICKED_ASYNC' });
    },
})
export default class About extends Component {

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { provideHooks } from 'redial';
import Widget from 'components/Widget';

import { Col, Row } from 'components/index';
import { loadSiteActivity } from './reducer';
import ActivityWidget from './components/ActivityWidget';

@provideHooks({
  fetch: ({ dispatch }) => {
    return dispatch(loadSiteActivity());
  },
})
export class Dashboard extends Component {
  componentDidMount() {
    this.props.loadSiteActivity();
  }
  render() {
    return (
      <div>
        
          
            
          
          </div>

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

@provideHooks({
  fetch: ({ params, setProps, getProps }) => {
    if (!getProps().user || getProps().user.login !== params.id) {
      return fetch(`https://api.github.com/users/${params.id}`)
        .then((response) => response.json())
        .then((user) => setProps({ user }))
    }
  }
})
export default class User extends Component {
  render() {
    return (
      <div>
        <h3>{ this.props.user.name } <pre>@{ this.props.user.login }</pre></h3>
        <img src="{">
      </div>
    );