How to use the redial.provideHooks function in redial

To help you get started, we’ve selected a few redial examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dlmr / react-router-redial / examples / redux / components / Index.js View on Github external
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();
github pekkis / hardcore-react-training / src / pages / container / IndexPageContainer.js View on Github external
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);
github FrontBand / react-boilerplate / app / common / containers / pages / MoviesDetailsPage / index.js View on Github external
<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);
github FrontBand / react-boilerplate / app / common / containers / pages / MoviesListPage / index.js View on Github external
<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);
github sergeysova / rurarar / app / components / pages / Github / Github.js View on Github external
import { loadTopRepo, setQuery, search } from 'store/github/github'


const redial = {
  fetch: ({ dispatch }) =&gt; dispatch(loadTopRepo()),
}

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

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

const Github = ({ list, updateQuery, query, startSearch, loading, onInputKey }) =&gt; (
  
    
      <h1>Github API usage</h1>
      
        <input value="{query}">
        <button>Search</button>
github sergeysova / rurarar / src / routing / Home / Home.js View on Github external
marginTop: 10,
    marginBottom: 10,
  },
}

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

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

const Home = ({ home: { number, show }, sheet: { classes } }) =&gt; (
  <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)
github dlmr / react-router-redial / examples / named-components / components / Header.js View on Github external
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 (
github rocjs / roc-package-web-app-react / examples / complex / src / components / about / index.js View on Github external
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 {
github strues / boldr / src / common / scenes / Dashboard / Dashboard.js View on Github external
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 }) =&gt; {
    return dispatch(loadSiteActivity());
  },
})
export class Dashboard extends Component {
  componentDidMount() {
    this.props.loadSiteActivity();
  }
  render() {
    return (
      <div>
        
          
            
          
          </div>
github dlmr / react-router-redial / examples / simple / components / User.js View on Github external
import React, { Component } from 'react';
import { provideHooks } from 'redial';
import fetch from 'isomorphic-fetch';

@provideHooks({
  fetch: ({ params, setProps, getProps }) =&gt; {
    if (!getProps().user || getProps().user.login !== params.id) {
      return fetch(`https://api.github.com/users/${params.id}`)
        .then((response) =&gt; response.json())
        .then((user) =&gt; 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>
    );

redial

Universal data fetching and route lifecycle management for React etc.

MIT
Latest version published 8 years ago

Package Health Score

48 / 100
Full package analysis

Popular redial functions

Similar packages