Реагируйте на собственные данные постов с помощью приставки

Question

Я пытаюсь отправить данные в API с избыточным хранилищем, но мне трудно понять всю логику.

У меня в ActionCreators есть функция postComment, которая в основном добавляет ответ API в массив комментариев.

export const postComment = (comment) => (dispatch) => {

    return fetch(baseUrl + 'testResults', {
        method: 'POST',
        body: JSON.stringify({
          comment:comment
        }),
        headers: {
            'Content-Type': 'application/json',
        },

    })
    .then(response => {
        if (response.ok) {
            return response;
        }
        else {
            var error = new Error('Error ' + response.status + ': ' + response.statusText);
            error.response = response;
            throw error;
        }
    },
    error => {
        var errmess = new Error(error.message);
        throw errmess;
    })
    .then(response => response.json())
    .then(response => dispatch(addComments(response)))
    .catch(error => { console.log('Post comments ', error.message);
        alert('Your comment could not be posted\nError: '+ error.message); })

}

export const addComments = (comments) => ({
    type: ActionTypes.ADD_COMMENTS,
    payload: comments
});

У меня есть соответствующие ActionTypes и комментарии.js-файлы в моей папке redux.

Теперь мой вопрос: как мне запустить эту функцию postComment?

Допустим, у меня есть файл CommentComponent, подобный этому

  const mapStateToProps = state => {
    return{
      comments:state.comments
    }
  }

  const mapDispatchToProps = dispatch => ({

    postComment: (comment) => dispatch(postComment(comment))
  })


class CommentsExample extends Component{


handleSubmit = () => {
 }

render() {
  return (
    <View>
       <TextInput
         style={{height: 40}}
         placeholder="Type your Comment here"
         onChangeText={(text) => this.setState({text})}
       />
      <Button
        title="Submit"
        onPress={this.handleSubmit}
      />
    </View>
  );
}
}

export default connect(mapStateToProps, mapDispatchToProps)(CommentsExample);

Что делать в моей функции handleSubmit?Должен ли mapDispatchToProps быть там?Как мне изменить этот код?Очевидно, я очень смущен.

Любая помощь будет оценена.

Answer 1

проверьте эту ссылку https://react -redux.js.org / using-реагировать-редукс / connect-mapdispatch показывает четкие примеры использования mapDispatchToProps.В вашем случае вы можете просто сделать это:

handleSubmit = () => {
this.props.postComment(this.state.text);
 }

где this.state.text - это внутреннее состояние вашего компонента.Вы также должны инициализировать свое внутреннее состояние CommentsComponent:

constructor(props) {
    super(props);

    this.state = {
      text: ''
    };
  }

Дайте мне знать, если у вас есть другие вопросы.Удачи.

Answer 2

Когда вы используете connect, вы в основном говорите, что redux предоставляет новые реквизиты для вашего компонента, которые задаются mapStateToProps и mapDispatchToProps.

Так что в вашем примере, CommentsExample теперь имеет доступдля двух реквизитов, созданных с помощью connect: comments (созданных mapStateToProps) и postComment (созданных mapDispatchToProps).

Для отправки действия postComment вы можете использовать предоставленную вhandleSubmit:

handleSubmit = () => {
  this.props.postComment(this.state.text)
}

Кроме того, чтобы использовать состояние в своем компоненте, сначала необходимо создать объект состояния, вот полный пример:

class CommentsExample extends Component {
  state = {
    text: '',
  }

  handleSubmit = () => {
    this.props.postComment(this.state.text);
  }

  render() {
    return (
      <View>
        <TextInput
          style={{height: 40}}
          placeholder="Type your Comment here"
          onChangeText={(text) => this.setState({text})}
        />
        <Button
          title="Submit"
          onPress={this.handleSubmit}
        />
      </View>
    );
  }
}