Redux：dispatch（...）。然后它不是一个函数

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

我在这里可以看到很多问题：

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. 派遣不会返回承诺。那么就不能用了，
3. connect将第一个参数作为mapStateToProps，将第二个参数作为mapDispatchtoProps。还有一个通常不使用的第三个参数。所以我暂时不提它。

4.你需要通过mapDispatchToProps传递动作创建者，如下所示：

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

Answer 2

问题出在这里：

export default connect(mapDispatchToProps)(ArticleList);

第一个参数应该是mapStateToProps。但你实际上可以传递null：

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