Redux Thunk Aktion = Nicht definiert in ComponentWillMount

Question

Ich versuche, eine Funktion von ComponentWillMount zu senden. Die Erstellungsfunktion für gebundene Aktionen fetchDraftAdventures funktioniert außerhalb von componentWillMount, aber nicht innerhalb von componentWillMount.

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

App verbunden

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)); 

Hier ist die Aktion selbst:

// 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); 

Die Antwort auf diese ist die folgende Stack-Trace:

Von dem, was ich sagen kann, Die Aktion wird von der Thunk-Middleware t übergeben o Die Router-Middleware ist nicht definiert. In meiner fetchDraftAdventure-Funktion wird dispatch({ type: GET_DRAFT_ADVENTURES_REQUESTED, payload: 'Fetching Draft Adventures' }) nie aufgerufen. Warum nicht?

Auch meine Speicher Konfigurationsdatei:

// 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

Wenn diese Bedingung nicht erfüllt ist: if (pageNumber[lastIndex]), dann Aktion Schöpfer DraftAdventures gibt nichts zurück (zB es gibt undefined Redux diese undefinierte Aktion zu versenden versucht und Sie Ihre Fehler erhalten

Aktion Schöpfer (DraftAdventures in.. dieses Beispiel) müssen immer eine Aktion zurückkehren. diese Aktion kann entweder ein einfaches Objekt oder eine Thunk (aka-Funktion) sein, oder etwas anderes haben Sie installiert redux Middleware zu behandeln.

Ihre Aktion Schöpfer manchmal kehrt ein Thunk (gut!) und kehrt manchmal undefiniert zurück (ba d!)

Answer 2

ich glaube, das Problem mit dem "Thunk" ist.

Dies ist keine thunk Signatur, Sie geben keine Funktion zurück.

Änderung dieser:

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

redux-thunk überprüfen, ob das Objekt typeoffunction.
Ihre Rückkehr ist in einer if Aussage.