Redux: dispatch(...).then is not a function

Question

I have such action:

import { GET, POST, PUT, REMOVE } from "../../Utils/Http";

export const FETCH_ARTICLES = "FETCH_ARTICLES";
export const FETCH_ARTICLES_SUCCESS = "FETCH_ARTICLES_SUCCESS";
export const FETCH_ARTICLES_FAILURE = "FETCH_ARTICLES_FAILURE";
export const RESET_ARTICLES = "RESET_ARTICLES";


export function fetchArticles() {
  const request = GET("/articles");

  return {
    type: FETCH_ARTICLES,
    payload: request
  };
}

export function fetchArticlesSuccess(articles) {
  return {
    type: FETCH_ARTICLES_SUCCESS,
    payload: articles
  };
}

export function fetchArticlesFailure(error) {
  return {
    type: FETCH_ARTICLES_FAILURE,
    payload: error
  };
}

and reducer:

import {
  FETCH_ARTICLES,
  FETCH_ARTICLES_SUCCESS,
  FETCH_ARTICLES_FAILURE,
  RESET_ARTICLES
} from "../Actions/Article";

const INITIAL_STATE = {
  articlesList: {
    articles: { data: [], total: 0 },
    error: null,
    loading: false
  },
  newTractor: { article: null, error: null, loading: false },
  activeTractor: { article: null, error: null, loading: false },
  deletedTractor: { article: null, error: null, loading: false }
};

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCH_ARTICLES:
      return {
        ...state,
        articleList: { articles: {}, error: null, loading: true }
      };
    case FETCH_ARTICLES_SUCCESS:
      return {
        ...state,
        articleList: { articles: action.payload, error: null, loading: false }
      };
    case FETCH_ARTICLES_FAILURE:
      return {
        ...state,
        articleList: { articles: {}, error: action.payload, loading: false }
      };
    case RESET_ARTICLES:
      return {
        ...state,
        articleList: { articles: {}, error: null, loading: false }
      };

    default:
      return state;
  }
};

export default reducer;

And i try it to use this way in list component:

import React, { Component } from "react";
import { connect } from "react-redux";
import { isUndefined } from "lodash";
import {
  fetchArticles,
  fetchArticlesSuccess,
  fetchArticlesFailure
} from "../../Store/Actions/Article";

class ArticleList extends Component {
  componentDidMount() {
    this.props.fetchArticles();
  }

  render() {
    return <div className="ui segment" />;
  }
}

const mapDispatchToProps = dispatch => {
  return {
    fetchArticles: () => {
      dispatch(fetchArticles()).then(response => {
        !response.error
          ? dispatch(fetchArticlesSuccess(response.payload.data))
          : dispatch(fetchArticlesFailure(response.payload.data));
      });
    }
  };
};

export default connect(null, mapDispatchToProps)(ArticleList);

also Http.js:

import axios from "axios";

const http = axios.create({
  baseURL: process.env.BASE_API_URL
});

export const GET = (url, params) => {
  return new Promise((resolve, reject) => {
    http({
      method: "get",
      url,
      params
    })
      .then(response => {
        resolve(response);
      })
      .catch(err => {
        console.log("GET err ", err);
        reject(err);
      });
  });
};

...

But as result I get:

TypeError: dispatch is not a function in dispatch(fetchArticles()).then(response => {

What I do wrong?

Also how can i write this part:

  fetchTractors()).then(response => {
    !response.error
      ? dispatch(fetchTractorsSuccess(response.payload.data))
      : dispatch(fetchTractorsFailure(response.payload.data));
  }

in component class? is it possible? (not to move it to the mapDispatchToProps block)

i took some ideas from here: https://github.com/rajaraodv/react-redux-blog/

Answer 1

I can see many problems here:

const mapDispatchToProps = dispatch => {
  return {
    fetchArticles: () => {
      dispatch(fetchArticles()).then(response => {
        !response.error
          ? dispatch(fetchArticlesSuccess(response.payload.data))
          : dispatch(fetchArticlesFailure(response.payload.data));
      });
    }
  };
};

1. dispatch is a synchronous thing by default unless you have configured some middleware such as redux-thunk to handle functions. dispatch takes native object as an argument in normal scenario.

2. dispatch does not return a promise. So then can not be used,

3. connect takes first arguments as mapStateToProps and second argument as mapDispatchtoProps. There is also third argument which is not generally used. So I will not mention it for now.

4.you need to pass the actions creators through mapDispatchToProps like this:

import { bindActionCreators } from "redux"
const mapDispatchToProps = dispatch => bindActionCreators({
 fetchArticles,
 fetchArticlesSuccess,
 fetchArticlesFailure,
}, dispatch)