How to use with redux-thunk ?

[nilaybrahmbhatt]

hi, my action is like this

import axios from 'axios';
export const FETCH_USER = 'FETCH_USER';

export function fetchUsers(){
  return function(dispatch) {
     axios.get(`http://localhost:3000/api/endpoint`)
    .then(response => {
      //return response;
      dispatch( { type: FETCH_USER, payload: response} );
    });
  }
}

please tell me how to connect this using asyncConnect ?

I tried this.

import React, { Component, PropTypes } from 'react'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { fetchUsers } from '../store/reducers/user_action'; import { asyncConnect } from 'redux-connect';

const $asyncConnect = asyncConnect([{ key: 'user', promise: ({ store, helpers }) => { const { user } = store.getState().user; if (user) { return Promise.resolve({data:user}); } return store.dispatch(fetchUsers()); }, }]) class Test extends Component { componentWillMount() { this.props.fetchUsers(); } render() { var { user } = this.props; return ( <div className="main-header">

Test

{ user?user.value:'loading...' } ); } } function mapStateToProps(state) { console.log(state); return { user:state.user.user }; } const $connect = connect(mapStateToProps, { fetchUsers }); export default compose($asyncConnect, $connect)(Test);

but not done. please tell me how to do this ?

[ygr1k]

Hi @nilaybrahmbhatt , you can try something like this:

thunk action example:

export const loadAsyncFilters = ({
  promise,
  dealCode,
  genderCategory,
  childCategory,
  thirdLevel,
  fourthLevel,
  selectedMainFilter,
  selectedCategoriesFilter,
  resolve
}) => (dispatch) => {
  const response = dispatch(fetchAsyncFiltersAction(promise));

  response.then(
    (data) => {
      dispatch(buildCategoriesTree(data.payload, dealCode, genderCategory, childCategory));

      dispatch(setDescription(
        dealCode,
        genderCategory,
        childCategory,
        thirdLevel,
        fourthLevel
      ));

      resolve();
    },
    (error) => {
      console.log(error);
    }
  );

  dispatch(setInitialFiltersData(
    selectedMainFilter,
    selectedCategoriesFilter
  ));
};

async connect promise example:

const $asyncConnect = asyncConnect([
  {
    // no `key` property, promise just fills store and then we get the value with classic `connect`
    promise: ({ store, location, match }) => {
      const
        { loaded } = store.getState().catalog,
        { fourthLevel } = match.params;// eslint-disable-line

      if (loaded) {
        return Promise.resolve();
      }

      const search = query.parse(location.search),
        filterParams = {};

      Object.keys(search).forEach((key) => {
        const symbol = key === 'p' ? '-' : ',';

        filterParams[key] = search[key].split(symbol);
      });

      const
        selectedCategoriesFilter = isUndefined(fourthLevel) ? [] : fourthLevel.split(','),
        selectedMainFilter = isEmpty(filterParams) ? {} : filterParams;

      const paramsFromRouteMatch = getParamsFromRouteMatch(match);

      //   loadAsyncFilters => thunk action
      return new Promise(resolve => store.dispatch(loadAsyncFilters({
        promise: FetchCatalogFactory.getFiltersPromise({
          ...paramsFromRouteMatch,
          search
        }),
        ...paramsFromRouteMatch,
        selectedMainFilter,
        selectedCategoriesFilter,
        resolve,
      })));
    },
  },
])