javascript - 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 block )

我从这里得到了一些想法: 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));
      });
    }
  };
};

dispatch 默认是同步的，除非你配置了一些中间件比如 redux-thunk 来处理函数。 dispatch 在正常情况下将 native 对象作为参数。

dispatch 不返回 promise 。所以那么就不能用了，

connect 将第一个参数作为 mapStateToProps，将第二个参数作为 mapDispatchtoProps。还有第三个参数通常不使用。所以我暂时不提。

4.您需要像这样通过 mapDispatchToProps 传递 Action 创建者:

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