Actions may not have an undefined "type" property - React-Native/Redux

Question

I am receiving the Actions may not have an undefined "type" property. Have you misspelled a constant? error from all actions within the RecommendationItemActions.js actions file.

This issue occurs with both exports contained within.

import firebase from 'firebase';
import {} from 'redux-thunk';

import {
  RECOMMENDATION_ITEM_UPDATE,
  RECOMMENDATION_ITEMS_FETCH_SUCCESS
} from './types';

export const recommendationItemUpdate = ({ prop, value }) => {
  //ex. Want to change name? Send in prop [name] and value [ what you want the new name to be ]
  return {
    type: RECOMMENDATION_ITEM_UPDATE,
    payload: { prop, value }
  };
};


export const recommendationItemsFetch = () => {
  const { currentUser } = firebase.auth();

  return (dispatch) => {
    firebase.database().ref(`/users/${currentUser.uid}/recommendationItems`)
    //snapshot is the value found
    //snapshot is an object that describes what data is there
      .on('value', snapshot => {
        console.log(snapshot.val());
        dispatch({
          type: RECOMMENDATION_ITEMS_FETCH_SUCCESS,
          payload: snapshot.val()
        });
        //snapshot.val() is the actual data at snapshot
      });
  };
};

These types are clearly defined within the imported type.js file

export const RECOMMENDATION_ITEMS_FETCH_SUCCESS = 'recommendation_items_fetch_success';
export const RECOMMENDATION_ITEM_UPDATE = 'recommendation_item_update';

The Actions are exported via the index.js file in the actions folder

export * from './RecommendationItemActions';

They are imported within the RecommendationItemCreate.js file

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, Image, View } from 'react-native';
import { recommendationItemUpdate, recommendationItemCreate } from '../../actions';
import { CardSection, Input, Button } from './../common';
import GooglePlacesAutocomplete from './../googlePlaces/GooglePlacesAutocomplete';

And referenced within the onChangeText of my Input component

  <Input
    label="ADDRESS"
    placeholder="Address"
    value={this.props.formattedAddress}
    onChangeText={
      value => this.props.recommendationItemUpdate({ prop: 'formattedAddress', value })
    }
  />

I can not trace any error that would lead to the Actions may not have an undefined "type" property and have been banging my head against this for a couple days now. The type is clearly defined and can be accurately traced throughout it's usage.

Closest Reference Found React+Redux - Uncaught Error: Actions may not have an undefined “type” property

This was still unhelpful. Here is my createStore as reference:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class App extends Component {
  componentWillMount() {
    const config = {
      REMOVED FOR EXAMPLE
    };
    firebase.initializeApp(config);
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    //applyMiddleware is a store-enhancer - it adds additional functionality
    //to store

    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

Answer 1

As stated by DJSrA the fix is a reference error. In my case, I was importing from two different files that contains constants. I referenced the wrong file for a particular constant.

Answer 2

I believe I have hit an issue like this before, and it was caused by dispatching a plain object within a thunk rather than an action creator, such as what you are doing. Could you try creating a recommendationItemsFetchSuccess action creator and dispatching that? Such as:

const recommendationItemsFetchSuccess = (snapshotVal) => {
  return {
    type: RECOMMENDATION_ITEMS_FETCH_SUCCESS,
    payload: snapshotVal
  };
 }

export const recommendationItemsFetch = () => {
  const { currentUser } = firebase.auth();

  return (dispatch) => {
    firebase.database().ref(`/users/${currentUser.uid}/recommendationItems`)
      .on('value', snapshot => {
        dispatch(recommendationItemsFetchSuccess(snapshot.val()));
      });
  };
};