Продолжайте получать "отправку" неопределенно с избыточным обещанием

Question

Я действительно новичок в Redux и его концепциях, особенно в промежуточном ПО, поэтому я прошу прощения за любые глупые ошибки.

В этом моем проекте мне нужно использовать redux-thunk. Я посмотрел несколько руководств и объяснений о том, как их применять. Затем я продолжал получать сообщение об ошибке "Uncaught TypeError: Невозможно прочитать свойство 'dispatch' of undefined". Я открыл инструменты разработчика и получил эту ошибку:

Понятия не имею, правильно ли я что-то делаю. Ниже приведены коды для моих создателей действий и магазина.

действия / index.js

import axios from 'axios';

export function fetchLessons() {
  console.log('called!');
  return function(dispatch) {
    axios.get(`${ROOT_URL}/lessons`)
      .then((response) => {
        dispatch(fetchLessonsSuccess(response))
      })
      .catch((err) => {
        dispatch(fetchLessonsError(err))
      })
  }
}

function fetchLessonsError(){
  return "An error has occured";
}

function fetchLessonsSuccess(response) {
  return {
    type: FETCH_LESSONS,
    payload: request
  };
}

index.js (магазин)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { Router, browserHistory } from 'react-router';
import rootReducer from './reducers/index';
import routes from './routes';
import promise from 'redux-promise';
import thunk from 'redux-thunk';

const middleware = applyMiddleware(promise(), thunk);
const store = createStore(rootReducer, compose(middleware));

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>
  , document.querySelector('.container'));

Answer 1

Я верю вашему звонку applyMiddleware() немного выключен. Вы хотите передать импортированное промежуточное ПО обещания напрямую, а не вызывать его: applyMiddleware(promise, thunk),

Эта функция в основном фабричная. Redux позвонит и пройдет в магазине dispatch функция, которую промежуточное программное обеспечение может затем использовать для отправки действий, когда оно будет готово.

Answer 2

Я не совсем уверен, но как-то так

export function fetchLessons() {
  console.log('called!');
  return function(dispatch) {
    return dispatch({
      type: 'FETCH_LESSONS',
      payload: axios.get(`${ROOT_URL}/lessons`)
        .then((response) => {
          dispatch(fetchLessonsSuccess(response))
        })
        .catch((err) => {
          dispatch(fetchLessonsError(err))
        });
    });
  };
}

function fetchLessonsError(){
  return "An error has occured";
}

function fetchLessonsSuccess(response) {
  return {
    type: 'FETCH_LESSONS_FULFILLED',
    payload: response
  };
}