title: Redux: dispatch(...).then is not a function
body: <p>I have such <code>action</code>:</p>
  
  <pre><code>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
    };
  }
  </code></pre>
  
  <p>and <code>reducer</code>:</p>
  
  <pre><code>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) =&gt; {
    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;
  </code></pre>
  
  <p>And i try it to use this way in <code>list component</code>:</p>
  
  <pre><code>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 &lt;div className="ui segment" /&gt;;
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
    return {
      fetchArticles: () =&gt; {
        dispatch(fetchArticles()).then(response =&gt; {
          !response.error
            ? dispatch(fetchArticlesSuccess(response.payload.data))
            : dispatch(fetchArticlesFailure(response.payload.data));
        });
      }
    };
  };
  
  export default connect(null, mapDispatchToProps)(ArticleList);
  </code></pre>
  
  <p>also <code>Http.js</code>:</p>
  
  <pre><code>import axios from "axios";
  
  const http = axios.create({
    baseURL: process.env.BASE_API_URL
  });
  
  export const GET = (url, params) =&gt; {
    return new Promise((resolve, reject) =&gt; {
      http({
        method: "get",
        url,
        params
      })
        .then(response =&gt; {
          resolve(response);
        })
        .catch(err =&gt; {
          console.log("GET err ", err);
          reject(err);
        });
    });
  };
  
  ...
  </code></pre>
  
  <p>But as result I get:</p>
  
  <p><code>TypeError: dispatch is not a function</code> in <code>dispatch(fetchArticles()).then(response =&gt; {</code></p>
  
  <p>What I do wrong?</p>
  
  <p>Also how can i write this part: </p>
  
  <pre><code>  fetchTractors()).then(response =&gt; {
      !response.error
        ? dispatch(fetchTractorsSuccess(response.payload.data))
        : dispatch(fetchTractorsFailure(response.payload.data));
    }
  </code></pre>
  
  <p>in component class? is it possible? (not to move it to the <code>mapDispatchToProps</code> block)</p>
  
  <p>i took some ideas from here: <a href="https://github.com/rajaraodv/react-redux-blog/" rel="nofollow noreferrer">https://github.com/rajaraodv/react-redux-blog/</a></p>