How to use redux-connect - 10 common examples

import { apiRequest } from '../../util/api-request';

const Page = loadable(() =>
  import(/* webpackChunkName: "home-page" */'./component')
)

const mapStateToProps = state => ({
  pageData : state.appReducer.pageData,
})

const mapDispatchToProps = dispatch => ({
  openLightbox  : config => dispatch(openLightboxAction(config)),
  closeLightbox : ()     => dispatch(closeLightboxAction()),
})

@asyncConnect([{
  promise: ({ params, helpers, store: { dispatch }, data }) =>
    apiRequest('page', {}, data)
      .then(({ data: { pageData } }) => dispatch(pageDataLoadSuccessAction(pageData)))
}], mapStateToProps, mapDispatchToProps)
export default class HomePage extends React.Component {
  render() {
    return 
  }
}

import { Header, Jumbotron, Button, Container } from 'reactstrap'

import { isLoaded as isInfoLoaded, load as loadInfo } from '../../redux/modules/info'

interface IProps {
  dispatch?: Function,
  info: {
    loaded: Boolean,
    stuff: String,
  },
}

// interface IState { }

@asyncConnect([{
  promise: ({store: {dispatch, getState}}) => {
    const promises = []
    if (!isInfoLoaded(getState())) {
      promises.push(dispatch(loadInfo()))
    }
    return Promise.all(promises)
  },
}])
@connect(
  (store) => ({ info: store.info }),
  (dispatch) => ({ dispatch }),
)
export class Home extends React.Component {
  render() {
    const pjson = require('../../../package.json')
    const dep = pjson.dependencies

import { connect } from 'react-redux';
import { IndexLink } from 'react-router';
import { LinkContainer } from 'react-router-bootstrap';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';
import Alert from 'react-bootstrap/lib/Alert';
import Helmet from 'react-helmet';
import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
import { isLoaded as isAuthLoaded, load as loadAuth /* , logout */ } from 'redux/modules/auth';
import { Notifs /* , InfoBar */ } from 'components';
import { push } from 'react-router-redux';
import config from 'config';
import { asyncConnect } from 'redux-connect';

@asyncConnect([
  {
    promise: ({ store: { dispatch, getState } }) => {
      const promises = [];

      if (!isAuthLoaded(getState())) {
        promises.push(dispatch(loadAuth()));
      }
      if (!isInfoLoaded(getState())) {
        promises.push(dispatch(loadInfo()));
      }
      return Promise.all(promises);
    }
  }
])
@connect(
  state => ({

import React, {PureComponent, PropTypes} from 'react';
import Helmet from 'react-helmet';

import {asyncConnect} from 'redux-connect';
import {bindActionCreators} from 'redux';

import {increaseCounter, decreaseCounter} from 'store/modules/counter';

import {Translate} from 'components';
import {Information} from 'components/Icons';

const styles = require('./Home.styl');

@asyncConnect(
    [
        {
            promise: () => {
                console.log('fetching');

                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve();
                    }, 2000);
                });
            }
        }
    ],
    state => ({
        count: state.getIn(['counter', 'home'], 0)
    }),

import React, { Component, PropTypes } from 'react';
import Helmet from 'react-helmet';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { load, addStar } from '../redux/modules/articleList';
import { create as createStar } from '../redux/modules/articleStar';
import { asyncConnect } from 'redux-connect';
import PageList from '../components/PageList';
import globalLoading from '../utils/globalLoading';

@asyncConnect([{
  promise: ({store: {dispatch}, location}) => {
    return globalLoading(dispatch(load({params: location.query})), dispatch);
  }
}])
@connect(
  state => ({
    articleList: state.articleList,
    layout: state.layout
  }),
  { createStar, addStar }
)
export default class ArticleList extends Component {
  render() {
    let
      props = this.props,
      articleList = props.articleList;

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { load } from '../../redux/modules/admin/articleList';
import { del } from '../../redux/modules/admin/article';
import { asyncConnect } from 'redux-connect';
import PageList from '../../components/PageList';
import Prompt from '../../components/Prompt';
import { deleteOver } from '../../utils/actionOver';
import globalLoading from '../../utils/globalLoading';
import { replace } from 'react-router-redux';

@asyncConnect([{
  promise: ({store: {dispatch}, location}) => {
    return globalLoading(dispatch(load({params: {...location.query}})), dispatch);
  }
}])
@connect(
  state => ({
    articleList: state.adminArticleList,
    article: state.adminArticle
  }),
  { del, load, replace }
)
export default class ArticleList extends Component {
  render() {
    let
      props = this.props,
      articleList = props.articleList,

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { load } from '../../redux/modules/admin/auth';
import { asyncConnect } from 'redux-connect';
import globalLoading from '../../utils/globalLoading';

@asyncConnect([{
  promise: ({store: {dispatch}}) => {
    return globalLoading(dispatch(load()), dispatch);
  }
}])
@connect(
  state => ({
    auth: state.adminAuth
  })
)
export default class Welcome extends Component {
  render() {
    let
      auth = this.props.auth;

    if (auth.loadData && auth.loadData.data) {
      let name = auth.loadData.data.admin.name;

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { asyncConnect } from 'redux-connect';
import Alert from '../../components/Alert';
import formatForm from '../../utils/formatForm';
import { editOver } from '../../utils/actionOver';
import * as articleActions from '../../redux/modules/admin/article';
import Prompt from '../../components/Prompt';
import m from '../../utils/moReactUtils';
import { push } from 'react-router-redux';
import globalLoading from '../../utils/globalLoading';

let contentEditor, introEditor;

@asyncConnect([{
  promise: ({store: {dispatch}, location}) => {
    return globalLoading(dispatch(articleActions.load({params: {id: location.query.id}})), dispatch);
  }
}])
@connect(
  state => ({
    article: state.adminArticle
  }),
  { ...articleActions, push }
)
export default class Article extends Component {
  state = {
    validateMsg: null
  }
  componentDidMount() {
    let

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import Helmet from 'react-helmet';
import { load, insertComment, addStar } from '../redux/modules/article';
import { asyncConnect } from 'redux-connect';
import Alert from '../components/Alert';
import formatForm from '../utils/formatForm';
import { create as createComment } from '../redux/modules/comment';
import { create as createStar } from '../redux/modules/articleStar';
import Prompt from '../components/Prompt';
import globalLoading from '../utils/globalLoading';

@asyncConnect([{
  promise: ({store: {dispatch}, location}) => {
    return globalLoading(dispatch(load({params: location.query})), dispatch);
  }
}])
@connect(
  state => ({
    article: state.article,
    layout: state.layout,
    comment: state.comment
  }),
  { createComment, insertComment, createStar, addStar }
)

export default class Article extends Component {
  state = {
    validateMsg: null

};

const beforeRouteEnter = [{
  promise: ({ store: { dispatch, getState } }) => {
    const promise = isEmpty(getState().user.ids)
      ? dispatch(userActionCreators.getAll()) : null;
    return __BROWSER__ ? null : promise;
  },
}];

const mapDispatchToProps = (dispatch) => ({
  userActions: bindActionCreators(userActionCreators, dispatch),
});

export default compose(
  asyncConnect(beforeRouteEnter, null, mapDispatchToProps),
)(LandingPage);