react-redux with thunk - getState is not a function

Question

I'm currently receiving the error TypeError: getState is not a function I'm attempting something similar to the example at http://redux.js.org/docs/advanced/AsyncActions.html

action.js - error occurs here

export const fetchCategoriesIfNeeded = (dispatch, getState) => {
    if(shouldFetchCategories(getState())){
        return dispatch(fetchCategories())
    }
}

App.js

  componentDidMount(){
    this.props.dispatch(fetchCategoriesIfNeeded())
  }

...

const mapStateToProps = (state, props) => {
  return {
    isFetching: state.isFetching,
    categories: state.categories
    }
}

reducer.js

function data (state = initialState, action){
    switch(action.type){
        case RECEIVE_CATEGORIES:
            return {
                ...state,
                isFetching: false,
                categories: action.categories
            }
        case REQUEST_CATEGORIES:
            return {
                ...state,
                isFetching: true
            }
        default:
            return state
    }
    return state
}

omitted some of the code for readability.

I've also tried this and receive TypeError: dispatch is not a function

export function fetchCategoriesIfNeeded(){
    return(dispatch, getState) =>{
        var state = getState()
        if(shouldFetchCategories(state)){
            dispatch(fetchCategories())
        }
    }
}

Answer 1

Change

export const fetchCategoriesIfNeeded = (dispatch, getState) => {

to

export const fetchCategoriesIfNeeded = () => (dispatch, getState) => {

Your action creator needs to return either an action (aka an object with a type key) or function (courtesy of redux-thunk). Your function signature had you passing in two parameters, dispatch and getState while the second function signature takes no parameters but the return function does take dispatch and getState, which are provided by redux-thunk.

You could also write it out to avoid confusion like so

export const fetchCategoriesIfNeeded = () => {
    return (dispatch, getState) => {
       // Do stuff
    }
}

Hope that helps!

Answer 2

It looks like you're doing something weird with how you're calling the dispatch.

You should be using a mapDispatchToProps function as well.

eg. something like this:

const mapDispatchToProps = (dispatch, props) => {
   return {
       onUpdate: dispatch(fetchCategories())
    }
}


const mapStateToProps = (state, props) => {
  return {
    isFetching: state.isFetching,
    categories: state.categories
    }
}

and:

  componentDidMount(){
    this.props.onUpdate(); 
  }