Thunk не будет отправлять из дочернего компонента - PullRequest
Новая
       65

Thunk не будет отправлять из дочернего компонента

0 голосов
/ 19 апреля 2020

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

У меня есть подключенный компонент Redux "Домашняя страница", который загружается в качестве индекса React Router.

В «Домашней странице» у меня есть дочерний компонент «EventCreate», который подключен к тому же хранилищу Redux.

Затем у меня есть Thunk, который использует Asyn c Ax ios для запроса Конечная точка GraphQL.

Когда я включаю thunk в свой компонент "Домашняя страница" и называю его так ... 

componentDidMount() {
   const { getEvent } = this.props
   const db_query = `query {
          allEvent {
            data {
              slug
              }}}`
   getEvent(db_query)
 }

, и это Thunk в моем основном файле Actions, вызов. 

export function getEvent(db_query) {
   return dispatch => {
      console.log(db_query)
      dispatch(getEventBegin());
      return axios({
      url: '<GRAPHQL ENDPOINT>',
      method: 'post',
      headers: { "Authorization" : <KEY> },
      data: {
        query: db_query
      }
    }).then((result) => {
      console.log("Query Result:")
      console.log(result)
      dispatch(getEventSuccess(result));
    }).catch(error => { dispatch(getEventFailure(error)); } );
  };
}

Как вы можете видеть, он вызывает действие START и SUCCESS или ERROR.

Вот где я застрял ...

Он работает как ожидается в "Домашней странице>", но не работает в "EventCreate". Он запускает действие, но ничего не делает внутри отправки Thunk. Никаких ошибок или чего-то еще, просто пропустите эту часть по какой-то причине.

В случае необходимости я подключаю оба к Redux, как это ... 

const mapDispatchToProps = {
  getEvent
}

export default compose(connect(mapStateToProps, mapDispatchToProps))(HomePage)

Затем в моем дочернем компоненте ... 

const mapDispatchToProps = {
  getEvent
}

export default compose(connect(mapStateToProps, mapDispatchToProps))(EventCreate)

Само действие импортируется как ... 

import { getEvent } from '../actions'

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

1 Ответ

0 голосов
/ 19 апреля 2020

Указав, что отправка исправлена. Не уверен, почему именно. 

const mapDispatchToProps = (dispatch) => {
return {
  getEvent: (dbQuery) => dispatch(getEvent(dbQuery))
}

}

...