Проблемы при передаче параметров в пользовательское промежуточное ПО

Question

Привет! Я передаю идентификатор в пользовательское промежуточное ПО, созданное мной в Redux. вот моя функция отправки:

/** NPM Packages */
import React, { Component } from "react";
import { connect } from "react-redux";
import fetchCategory from "../../../actions/categoryAction";
import deleteCategory from "../../../actions/categoryDeleteAction";

/** Custom Packages */
import List from "../List";
//import API from "../../utils/api";

class Category extends Component {
  constructor(props) {
    super(props);
    this.state = { categories: [], mesg: "", mesgType: "" };
    this.onChange = this.onChange.bind(this);
  }

  /** Hook Call */
  componentDidMount = async () => {
    if (this.props.location.state)
      this.setState({
        mesg: this.props.location.state.mesg,
        mesgType: this.props.location.state.mesgType
      });

    this.closeMesg();
    this.props.fetchCategory();
  };

  /** Methods */
  onChange = e => this.setState({ [e.target.name]: e.target.value });
  onDelete = id => {
    /*await API.delete("categories/" + id)
      .then(res => {
        const categories = this.state.categories.filter(el => el._id !== id);
        this.setState({
          categories: categories,
          mesg: res.data.msg,
          mesgType: "success"
        });

      })
      .catch(err => console.log(err));
      this.closeMesg();*/
      this.props.deleteCategory(id);
  };

  closeMesg = () =>
    setTimeout(
      function() {
        this.setState({ mesg: "", mesgType: "" });
      }.bind(this),
      30000
    );

  /** Rendering the Template */
  render() {
    const { mesg, mesgType } = this.state;
    return (
      <>
        {mesg ? (
          <div
            className={"alert alert-" + mesgType + " text-white mb-3"}
            role="alert"
          >
            {mesg}
          </div>
        ) : (
          ""
        )}
        <List
          listData={this.props.categories}
          listName="category"
          _handleDelete={this.onDelete.bind(this)}
        />
      </>
    );
  }
}

const matchStatestoProps = state => {
  return { categories: state.categories };
};

const dispatchStatestoProps = dispatch => {
  return {
    fetchCategory: () => dispatch(fetchCategory),
    deleteCategory: (id) =>dispatch(deleteCategory(id))
  };
};

export default connect(matchStatestoProps,dispatchStatestoProps)(Category);

Вот действие:

API импорта из "../pages/utils/api";

const deleteCategory = (id,dispatch) =>{
    API.delete("categories/" + id)
      .then(() => {
        dispatch({type:'DELETE'})
      })
      .catch(err => console.log(err));
}

export default deleteCategory;

здесь мой редуктор:

const initState = [];

const categoryReducer = (state = initState, { type, payload }) => {
  switch (type) {
    case "FETCH_CATEGORY":
      return payload.data;
    case "DELETE":
      alert("Data Deleted");
    default:
      return state;
  }
};

export default categoryReducer;

Теперь я получаю эту ошибку:

Error: Actions must be plain objects. Use custom middleware for async actions.
▶ 6 stack frames were collapsed.
deleteCategory
src/app/pages/isolated/category/Categories.js:92
  89 | const dispatchStatestoProps = dispatch => {
  90 |   return {
  91 |     fetchCategory: () => dispatch(fetchCategory),
> 92 |     deleteCategory: (id) =>dispatch(deleteCategory(id))
  93 |   };
  94 | };
  95 | 

Если возможно, кто-нибудь может сказать, где я иду не так?

Или есть еще какие-то способ передачи параметров в пользовательское промежуточное ПО?

Answer 1

Используйте redux-thunk в качестве промежуточного программного обеспечения для обработки асинхронных c операций в действиях. Действия должны возвращать простые объекты, что означает что-то вроде ниже,

{
  type : "DELETE",
  payload : data
}

Но в действии Delete вы возвращаете Promise, поэтому он говорит, что действия должны возвращать только простые объекты. Чтобы справиться с этой ситуацией, вы можете использовать промежуточное программное обеспечение, как reduxt-thunk. https://www.npmjs.com/package/redux-thunk

Редактировать - если вы используете Redux-thunk, в блоке catch deleteCategory вы не вернули ни одного объекта. Вы просто console.log() ошибка. верните ошибку из блока catch и посмотрите, нет ли ошибок в вашем API вызове

Answer 2

Вы можете сослаться на мой реагирующий проект

class Category extends Component {
  constructor(props) {
    super(props);
    this.state = { categories: [], mesg: "", mesgType: "" };
    this.onChange = this.onChange.bind(this);
  }

  /** Hook Call */
  componentDidMount = async () => {
    if (this.props.location.state)
      this.setState({
        mesg: this.props.location.state.mesg,
        mesgType: this.props.location.state.mesgType
      });

    this.closeMesg();

    this.props.dispatch(fetchCategory());  // we have to dispatch our action like 

  };

  /** Methods */
  onChange = e => this.setState({ [e.target.name]: e.target.value });

  onDelete = id => {
      this.props.dispatch(deleteCategory(id));
  };

  closeMesg = () =>
    setTimeout(
      function() {
        this.setState({ mesg: "", mesgType: "" });
      }.bind(this),
      30000
    );

  /** Rendering the Template */
  render() {
    const { mesg, mesgType } = this.state;
    return (
      <>
        {mesg ? (
          <div
            className={"alert alert-" + mesgType + " text-white mb-3"}
            role="alert"
          >
            {mesg}
          </div>
        ) : (
          ""
        )}
        <List
          listData={this.props.categories}
          listName="category"
          _handleDelete={this.onDelete.bind(this)}
        />
      </>
    );
  }
}

const matchStatestoProps = state => {
  return { categories: state.categories };
};

export default connect(matchStatestoProps)(Category);

В вашей категории удаления: вы можете получить доступ к рассылке как

const deleteCategory = (id) => async (dispatch) =>{
   await API.delete("categories/" + id)
      .then(() => {
        dispatch({type:'DELETE'})
      })
      .catch(err => console.log(err));
}

export default deleteCategory;