CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxredux-thunk
guzajj
guzajj

Reputation: 103

Return promise from React Redux Thunk

I have the next React/Redux/Thunk code:

This is my call to API:

//api.js
export const categoriesFetchData = (page, parentOf) => {
  return axios.get(
    url +
    'categories/' +
    '?parent=' +
    parentOf +
    '&limit=10' +
    '&offset=' +
    (page - 1) * 10,
  );
};

This my action (I pretend to return an axios promise from this action):

//actions.js
export const subCategoriesFetchData = (page = 1, parentOf) => {
  return dispatch => {
    dispatch(oneCategoryLoading(true));
    return api.categoriesFetchData(page, parentOf)
      .then(response => {
        dispatch(subCategoriesFetchDataSuccess(response.data.results));
        dispatch(oneCategoryLoading(false));
      })
      .catch(error => {
        console.log(error);
      });
  };
};

And in my container:

const mapDispatchToProps = dispatch => {
  return {
    fetchOneCategory: slug => {
      dispatch(fetchOneCategory(slug)).then(() => {
        console.log('working');
      });
    },

  };
};

But I get this error:

Uncaught TypeError: Cannot read property 'then' of undefined

What is wrong and how to return a promise in the container?

Thanks for your help.

Upvotes: 5

Views: 4983

Answers (3)

guzajj
guzajj

Reputation: 103

Sorry, i will answer my own question:

i change this:

const mapDispatchToProps = dispatch => {
  return {
    fetchOneCategory: slug => {
      dispatch(fetchOneCategory(slug)).then(() => {
        console.log('working');
      });
    },

  };
};

to

const mapDispatchToProps = dispatch => {
  return {
    fetchOneCategory: slug => {
      return dispatch(fetchOneCategory(slug))
    },
  };
};

and now i can make this:

import React from 'react';
import { connect } from 'react-redux';

class MyComponent extends React.Component {

  componentDidMount() {
    this.props.fetchOneCategory()
      .then( () => { console.log('it works'); })
      .catch( () => { console.log('on error'); });
  }

  render() {
    return ( <p>Whatever</p> );
  }
}

thanks for your help!

Upvotes: 2

Kaloyan Kosev
Kaloyan Kosev

Reputation: 13067

Here's how I am approaching this.

First, there are a couple of changes you need to do to your subCategoriesFetchData function:

export const subCategoriesFetchData = (page = 1, parentOf) => {
  return dispatch => {
    dispatch(oneCategoryLoading(true));

    // That's the key thing. Return a new promise, then ma
    return new Promise((resolve, reject) => {

      api.categoriesFetchData(page, parentOf)
        .then(response => {
          dispatch(subCategoriesFetchDataSuccess(response.data.results));
          dispatch(oneCategoryLoading(false));

          resolve(response); // Resolve it with whatever you need
        })
        .catch(error => {
          console.log(error);

          reject(error); // And it's good practice to reject it on error (optional)
        });
    });
  };
};

Then, here's how you can do the trick with mapDispatchToProps and then chaining .then()s:

import React from 'react';
import { connect } from 'react-redux';
import { subCategoriesFetchData } from './wherever-it-is';

class MyComponent extends React.Component {

  componentDidMount() {
    this.props.subCategoriesFetchData()
      .then( () => { console.log('it works'); })
      .catch( () => { console.log('on error'); });
  }

  render() {
    return ( <p>Whatever</p> );
  }
}

const mapDispatchToProps = { subCategoriesFetchData };

connect(null, mapDispatchToProps)(MyComponent);

Upvotes: 3

Xuezheng Ma
Xuezheng Ma

Reputation: 377

in your container, you don't need

.then(() => {
    console.log('working');
  });

dispatch(fetchOneCategory(slug)) doesn't return a promise, there is no then to be read

Upvotes: 0

Related Questions