reactjs - redux-promise で未定義の「dispatch」を取得し続ける

Question

私は Redux とその概念、特にミドルウェアにまったく慣れていないので、ばかげたエラーについてお詫び申し上げます。

私のこのプロジェクトでは、redux-thunk を使用する必要があります。それらを適用する方法について、いくつかのガイドと説明を見てきました。その後、「Uncaught TypeError: 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'));