Redux Thunk Action = componentWillMountで未定義

Question

componentWillMountから関数をディスパッチしようとしています。バインドされたアクション作成者関数fetchDraftAdventuresは、componentWillMountの外部では動作しますが、内部では動作しません。

componentWillMount() { 
    let {draftAdventures, editableAdventures} = this.props; 
    console.log("this props") 
    this.props.fetchDraftAdventures(1); 
    console.log(' adventures props', this.props) 
    } 

のAppは

export default withRouter(connect(
    state => { 
    return { 
     editableAdventures: state.editableAdventures, 
     draftAdventures: state.draftAdventures, 
    }; 
    }, 
    dispatch => ({ 
    fetchAdventureEditable: bindActionCreators(fetchAdventureEditable, dispatch), 
    fetchEditableAdventures: bindActionCreators(fetchEditableAdventures, dispatch), 
    fetchAdventureDraft: bindActionCreators(fetchAdventureDraft, dispatch), 
    fetchDraftAdventures: bindActionCreators(fetchDraftAdventures, dispatch), 
    dispatch 
    }) 
)(AdventuresDashboard)); 

を接続ここでは、アクションそのものです：

// Constants 
import { 
    GET_DRAFT_ADVENTURES_REQUESTED, 
    GET_DRAFT_ADVENTURES_SUCCEEDED, 
    GET_DRAFT_ADVENTURES_REJECTED 
} from '../../../constants/Actions' 

import {get} from '../../../lib/request'; 

const DraftAdventures = (args) => { 
    console.log('draft adventures', args) 
    const Authorization = localStorage.getItem('authToken'); 

    const pageNumber = args; 
    const lastIndex = pageNumber.length - 1; 
    let pageParam = ''; 

    if (pageNumber[lastIndex]) { 
    pageParam = `?page=${pageNumber[lastIndex]}` 

    return dispatch => { 

     dispatch({ type: GET_DRAFT_ADVENTURES_REQUESTED, payload: `Fetching Draft Adventures` }) 
     get(`/draft-adventures/${pageParam}&ordering=-updated_at`, {}, 
     {Authorization}) 
     .then(response => { 
     if (response) { 
      if (response.data) { 
      let page = null; 
      if (response.data.next !== null) { 
       page = response.data.next.split('page=')[1]; 
       page = Number(page); 
      } 
      dispatch({ type: GET_DRAFT_ADVENTURES_SUCCEEDED, payload: response.data, pageNumber: Number(page)}) 

      } else { 
      dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: 'NULL response.data' }) 
      } 
     } else { 
      dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: 'NULL response' }) 
     } 
     }).catch(error => { 
     console.log('errorer', error) 
     dispatch({ type: GET_DRAFT_ADVENTURES_REJECTED, payload: error }) 
     }) 

    } 
    } 
}; 

export default (DraftAdventures); 

これに対する応答は次のスタックトレースです：私が言うことができるものから

、アクションはサンクのミドルウェアから渡されていますoルータのミドルウェアは未定義です。私のfetchDraftAdventure関数の中では、dispatch({ type: GET_DRAFT_ADVENTURES_REQUESTED, payload: 'Fetching Draft Adventures' })は決して呼び出されません。何故なの？また

、私の店の設定ファイル：

// Libraries 
import { createStore, applyMiddleware, compose } from 'redux'; 
import thunk from 'redux-thunk'; 
import {logger} from 'redux-logger'; 

import createHistory from 'history/createBrowserHistory' 
import { routerMiddleware } from 'react-router-redux' 

// Components 
import DevTools from '../devTools/DevTools'; 

// Reducers 
import reducer from '../reducers'; 

// Config 
import reduxLoggerConfig from '../config/reduxLoggerConfig'; 

//const logger = createLogger(reduxLoggerConfig); 

const history = createHistory() 
const middlewareRouter = routerMiddleware(history) 


const createDevStoreWithMiddleware = compose(
    applyMiddleware(thunk, middlewareRouter, logger), 
    DevTools.instrument() 
)(createStore); 

console.log('createDev store', createDevStoreWithMiddleware(reducer)) 
export default function configureStore() { 

    var store = createDevStoreWithMiddleware(reducer); 

    // enable webpack hot module replacement for reducers 
    if (module.hot && process.env.BUILD_TARGET === 'local') { 
    module.hot.accept('../reducers/index.js',() => { 
     const nextRootReducer = require('../reducers'); 
     store.replaceReducer(nextRootReducer); 
    }); 
    } 

    return store; 
} 

Answer 1

は：if (pageNumber[lastIndex])、その後、あなたのアクションの作成者DraftAdventuresは（何も返しません例えば、それはundefinedを返しReduxのこの未定義のアクションを派遣し、あなたがエラーを取得しようと

アクションクリエーター（DraftAdventuresインチ。この例）アクションを返す常にする必要があります。そのアクションは単純なオブジェクト、またはサンク（別名機能）、またはあなたが処理するReduxのミドルウェアをインストールしている何か他のもののいずれかとすることができる。

あなたのアクションの作成者は時々戻ってサンク（良い！）と時にはundefinedを返します（ba d！）

Answer 2

私はこの問題は、あなたの "サンク" であると思います。

これはthunkシグネチャではないため、関数を返さないことになります。これに

変更：オブジェクトがtypeoffunctionであるかどうかを確認するために

const DraftAdventures = (args) => ({dispatch}) => {... 

redux-thunkチェック。
あなたの返品はifの明細書に記載されています。この条件が真でない場合