Почему mapStateToDispatch не отправляет правильное значение - PullRequest
Новая
       19

Почему mapStateToDispatch не отправляет правильное значение

0 голосов
/ 03 августа 2020

Я пытаюсь отправить действие из своего компонента для обновления состояния. Обычно я помещаю всех своих создателей действий в функцию подключения, например - connect (mapStateToProps, {actions}) (component).

Но после просмотра технических подробностей я подумал сделать mapDispatchToProps для моего подключения HO C.

Теперь проблема, с которой я столкнулся, заключается в том, что, как обычно, состояние обновляется с правильной полезной нагрузкой. но всякий раз, когда я пытаюсь вставить mapDispatchToProps в мое соединение HO C, действие запускается, но полезная нагрузка не отправляется.

Я прикрепляю фрагмент кода для облегчения понимания 

//actions ------------------
import { SAVE_COMMENT } from "actions/types";

export function saveComment(comment) {
  return {
    type: SAVE_COMMENT,
    payload: comment,
  };
}


//reducer ------------------
import { SAVE_COMMENT } from "actions/types";

export default function (state = [], action) {
  switch (action.type) {
    case SAVE_COMMENT:
      return [...state, action.payload];
    default:
      return state;
  }
}

//component ------------------
import React, { Component } from "react";
import { connect } from "react-redux";

import { saveComment } from "actions/index";

class CommentBox extends Component {
  state = {
    comment: "",
  };

  handleChange = (e) => {
    this.setState({ comment: e.target.value });
  };

  handleSubmit = (e) => {
    e.preventDefault();

    //call an action creator and save the comment
    this.props.saveComment(this.state.comment);

    this.setState({ comment: "" }); //to empty-out the textarea
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h4>Add a Comment</h4>
        <textarea value={this.state.comment} onChange={this.handleChange} />
        <div>
          <button>Submit Comment</button>
        </div>
      </form>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    saveComment: () => dispatch(saveComment()),
  };
};

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

1 Ответ

3 голосов
/ 03 августа 2020

Вам просто нужно изменить 

const mapDispatchToProps = (dispatch) => {
  return {
    saveComment: () => dispatch(saveComment()),
  };
};

на 

const mapDispatchToProps = (dispatch) => {
  return {
    saveComment: (comment) => dispatch(saveComment(comment)),
  };
};
...