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

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

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

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

Затем у меня есть Thunk, который использует Async Axios для запроса конечной точки GraphQL.

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

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

и это преобразователь в моем основном файле действий, который он вызывает.

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.


person Myka    schedule 19.04.2020    source источник
comment
Вы можете не писать в compose(connect(mapStateToProps, mapDispatchToProps)) . Я не вижу, чтобы вы подключали EventCreate к redux: export default connect(mapStateToProps, {eventCreate})(EventCreate)   -  person HMR    schedule 19.04.2020
comment
Спасибо за ответ. Я подключаю EventCreate так же, как Homepage, который я набрал, но не указал явно, что я исправлю. Какой второй аргумент вы передаете для подключения? Это должно быть EventCreate как имя компонента и просто опечатка в нижнем регистре? Если да, могу ли я передать это вместо своей рассылки?   -  person Myka    schedule 19.04.2020
comment
Должен был быть getEvent   -  person HMR    schedule 19.04.2020
comment
ой попался. Я уже подключаю дочерний компонент EventCreate, он может вызывать действие, но по какой-то причине диспетчерская часть не срабатывает.   -  person Myka    schedule 19.04.2020
comment
Вы можете попытаться записать в console.log getEvent после импорта и в функции рендеринга EventCreate. В консоли можно нажать на результат и посмотреть, откуда берутся эти функции. После импорта он должен исходить из файла создателя действия, а при рендеринге он должен исходить из реактивного редукса.   -  person HMR    schedule 19.04.2020
comment
Я вывожу оба, но когда я нажимаю на информацию в консоли, где именно я могу найти источник? Извините, никогда не делал этого стиля раньше   -  person Myka    schedule 19.04.2020
comment
Нажмите на вывод вашего console.log, то, что вы зарегистрировали.   -  person HMR    schedule 19.04.2020
comment
Когда я это делаю, я перехожу к main.chunk.js, но я не уверен, где в этом огромном файле находится источник функции.   -  person Myka    schedule 19.04.2020
comment
Вы используете хром и создали проект с помощью приложения create-реагировать? Я делаю, и это приводит к созданию исходных карт, поэтому вы переходите к фактическому коду, а не к уменьшенному коду.   -  person HMR    schedule 19.04.2020
comment
Хорошо, по какой-то причине мне пришлось включить исходные карты. В обоих случаях он говорит, что загружается из моего индексного файла Actions, НО он также говорит, что в моем компоненте домашней страницы, но там он работает нормально. я так запутался лол   -  person Myka    schedule 19.04.2020
comment
В рендере вы должны регистрировать getEvent из реквизита.   -  person HMR    schedule 19.04.2020
comment
Я делаю... const { getEvent } = this.props console.log(getEvent) В компоненте моей домашней страницы теперь говорится, что рендеринг из Redux, но в другом моем компоненте это оба файла Action. Итак, вы на что-то! Хотя непонятно почему не подключается   -  person Myka    schedule 19.04.2020
comment
заработало! Проблема заключалась в том, что Thunk требует функцию, которая возвращает вызываемую функцию, а не может просто перечислить ее в объекте, таком как обычный Redux. const mapDispatchToProps = (dispatch) =› { return { getEvent: (dbQuery) =› dispatch(getEvent(dbQuery)) } } Спасибо за помощь!   -  person Myka    schedule 19.04.2020


Ответы (1)


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

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

}

person Myka    schedule 19.04.2020
comment
Нет, connect(mapStateToProps,{getEvent}) тоже должно работать нормально. Возможно, компонент EventCreate с именем getEvent был импортирован, а не props.getEvent. - person HMR; 19.04.2020
comment
извините, написал это поздно ночью, не имел в виду, что это требуется ВСЕМУ Thunk, только мое, но да, я действительно хотел бы точно знать, что вызывает проблему. Все мои другие функции Redux работают нормально, поэтому в вызове не хватает реквизита. - person Myka; 19.04.2020