отправка redux-thunk не работает

У меня проблема с thunk и асинхронной диспетчеризацией. Итак, вот мой код:

function fetchProvider() {
  return (dispatch) => {
    graphqlService(fetchProviderQuery)
      .then((result) => {
        dispatch({
          type: FETCH_PROVIDER,
          data: result.data.data.CurrentProvider,
        });
      });
  };
}

class Dashboard extends React.Component {
  componentDidMount() {
    this.props.fetchProvider();
  }

  render() {
    const { provider } = this.props;

    return (
      <div>
        <ul>
          <li>id: {provider.id}</li>
          <li>name: {provider.name}</li>
          <li>description: {provider.description}</li>
        </ul>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  provider: state.provider,
});

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

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

Не знаю почему, но не работает диспетчеризация внутри создателя действия fetchProvider. graphqlService работает хорошо, и в момент отправки данные действия FETCH_PROVIDER, переданные в отправку, верны, но затем что-то идет не так, и редукторы не вызываются с этим действием. Что может быть причиной этой проблемы?


person Eugene Tsakh    schedule 04.07.2017    source источник
comment
Вы украсили свой Dashboard с помощью декоратора @connect? Если вам это нужно, чтобы иметь возможность вызывать функцию отправки. См.: stackoverflow.com/questions/36553814/   -  person Tom Doodler    schedule 04.07.2017
comment
@TomDoodler, да. Это последняя строка кода выше.   -  person Eugene Tsakh    schedule 04.07.2017
comment
Является ли state.provider нулевым или неопределенным до того, как сработает действие FETCH_PROVIDER?   -  person MinusFour    schedule 04.07.2017
comment
Начальное состояние @MinusFour iit   -  person Eugene Tsakh    schedule 04.07.2017


Ответы (2)


Наконец я нашел проблему. Это было вызвано некорректной инициализацией промежуточного ПО react-router-redux. Я передал конструктор промежуточного программного обеспечения для применения промежуточного программного обеспечения вместо созданного промежуточного программного обеспечения.

person Eugene Tsakh    schedule 04.07.2017

Ваш thunk должен также вернуть обещание, иначе он не будет работать должным образом. Просто немного измените свою функцию fetchProvider

function fetchProvider() {
  return (dispatch) => {
    return graphqlService(fetchProviderQuery)
      .then((result) => {
        dispatch({
          type: FETCH_PROVIDER,
          data: result.data.data.CurrentProvider,
        });
      });
  };
}
person Ematipico    schedule 04.07.2017
comment
Я пробовал, и это тоже не работает. Но на самом деле он не должен ничего возвращать. - person Eugene Tsakh; 04.07.2017
comment
Да, извиняюсь. Я предполагаю, что redux-thunk правильно инициализирован? - person Ematipico; 04.07.2017
comment
Вот инициализация: импортировать преобразователь из 'redux-thunk'; const store = createStore(reducers, applyMiddleware(thunk, routerMiddleware)); - person Eugene Tsakh; 04.07.2017
comment
Я также пытался изменить порядок промежуточного программного обеспечения, но это также не помогло. - person Eugene Tsakh; 04.07.2017
comment
Все выглядит нормально.. это действительно странно. Если вы проверите dispatch прямо перед ее вызовом, сможете ли вы увидеть, что это функция? Это определено? - person Ematipico; 04.07.2017