Redux：dispatch(...).then 不是函數

Question

我有這樣的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
  };
}

和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;

我嘗試在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);

還有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);
      });
  });
};

...

但結果我得到：

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

我做錯了什么？

另外我該如何寫這部分：

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

在組件類中？ 是否可以？ （不要將其移動到mapDispatchToProps塊）

我從這里得到了一些想法： https : //github.com/rajaraodv/react-redux-blog/

Answer 1

問題在這里：

export default connect(mapDispatchToProps)(ArticleList);

第一個參數應該是mapStateToProps 。 但你實際上可以傳遞null：

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

Answer 2

我可以在這里看到很多問題：

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

1. dispatch 默認是同步的，除非你配置了一些中間件，比如 redux-thunk 來處理函數。 dispatch 在正常情況下將本機對象作為參數。

2. dispatch 不返回 promise。 那么就不能用了，

3. connect 將第一個參數作為 mapStateToProps，第二個參數作為 mapDispatchtoProps。 還有第三個參數，通常不使用。 所以我暫時不提。

4.你需要像這樣通過 mapDispatchToProps 傳遞動作創建者：

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

Answer 3

如果有人在使用ts + redux時遇到這個問題，IDE 提示你沒有then方法，你可以參考這個鏈接