2016-09-21 8 views
1

私は本当にReduxとその概念、特にミドルウェアには新しかったので、愚かなエラーについてお詫び申し上げます。redux-promiseで 'ディスパッチ'を定義しないでください

私のこのプロジェクトでは、私はredux-thunkを使用する必要があります。私はそれらを適用する方法についていくつかのガイドと説明を見てきました。私はその後、「Uncaught TypeError:未定義のプロパティ 'dispatch'を読み取ることができません」というエラーを受け取りました。私は、開発ツールを開いて、このエラーを示してしまった:

enter image description here

私は右の何かをやっている場合、私は見当がつかない。以下は私のアクションクリエイターとストアのコードです。

アクション/ 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')); 

答えて

3

私はapplyMiddleware()へのお電話は少しオフになっていると信じています。インポートされた約束ミドルウェアを直接渡したい場合は、applyMiddleware(promise, thunk)と呼ぶのではありません。

この機能は基本的に工場です。 Reduxはそれを呼び出して、ストアのdispatch関数を渡します。この関数は、ミドルウェアが準備ができたらいつでもアクションをディスパッチするために使用できます。

0

私は全くわからなく、この

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 
    }; 
} 
のようなものではありません
関連する問題