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 (

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,
      })));
    },
  },
])