TypeError: undefined is not an object (evaluating '_UserInfoRedux.UserInfoActions.userInfoRequest')

Question

I'm new to React Native, and I'm using Redux-Saga. Unfortunately, there is an error that I am unable to resolve.

I get this error when I dispatch an action:

TypeError: undefined is not an object (evaluating '_UserInfoRedux.UserInfoActions.userInfoRequest')

Here's my Component wherein I dispatch the action:

import React, { Component } from 'react'
import { connect } from 'react-redux'
import {UserInfoActions } from '../Redux/UserInfoRedux'

class LoginScreen extends Component {

  constructor(props){
    super(props)

    this.state = {
    username: '', password: '', rememberPwd:false
    }

    this.props.getUserInfo();

  }

  componentWillReceiveProps(newProps) {
    this.forceUpdate();
    if (newProps.userInfo.error === null && newProps.userInfo.payload !== null) {
      console.log(newProps.userInfo.payload.results);
    } else {
      console.log(">> error");
    }
  }

  render() {
  .
  .
  .
  }
}

const mapStateToProps = state => {
  return {
    userInfo: state.userInfo,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getUserInfo: () => {
      console.log('clicked');
      dispatch(UserInfoActions.userInfoRequest())
    }
  };
};

export default connect(
  mapStateToProps,

  mapDispatchToProps
)(LoginScreen);

Here's my redux class

import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'

/* ------------- Types and Action Creators ------------- */

const { Types, Creators } = createActions({
  userInfoRequest: ['data'],
  userInfoSuccess: ['payload'],
  userInfoFailure: null
})

export const UserInfoTypes = Types
export default Creators

/* ------------- Initial State ------------- */

export const INITIAL_STATE = Immutable({
  data: null,
  fetching: null,
  payload: null,
  error: null
})

/* ------------- Selectors ------------- */

export const UserInfoSelectors = {
  getData: state => state.data
}

/* ------------- Reducers ------------- */

// request the data from an api
export const request = (state, { data }) =>
  state.merge({ fetching: true, data, payload: null })

// successful api lookup
export const success = (state, action) => {
  const { payload } = action
  return state.merge({ fetching: false, error: null, payload })
}

// Something went wrong somewhere.
export const failure = state =>
  state.merge({ fetching: false, error: true, payload: null })

/* ------------- Hookup Reducers To Types ------------- */

export const reducer = createReducer(INITIAL_STATE, {
  [Types.USER_INFO_REQUEST]: request,
  [Types.USER_INFO_SUCCESS]: success,
  [Types.USER_INFO_FAILURE]: failure
})

And finally my Saga class

/* ***********************************************************
* A short word on how to use this automagically generated file.
* We're often asked in the ignite gitter channel how to connect
* to a to a third party api, so we thought we'd demonstrate - but
* you should know you can use sagas for other flow control too.
*
* Other points:
*  - You'll need to add this saga to sagas/index.js
*  - This template uses the api declared in sagas/index.js, so
*    you'll need to define a constant in that file.
*************************************************************/

import { call, put } from 'redux-saga/effects'
import {UserInfoActions} from '../Redux/UserInfoRedux'

export function * getUserInfo (api, action) {
  const { data } = action
  // get current data from Store
  // const currentData = yield select(UserInfoSelectors.getData)
  // make the call to the api
  const response = yield call(api.getUserInfo, data)

  // success?
  if (response.ok) {
    // You might need to change the response here - do this with a 'transform',
    // located in ../Transforms/. Otherwise, just pass the data back from the api.
    yield put(UserInfoActions.userInfoSuccess(response.data))
  } else {
    yield put(UserInfoActions.userInfoFailure())
  }
}

Thank you in advance for your help!

Answer 1

It's my own stupid mistake! Didn't know the importance of {} when importing. Removed {} in one of my imports and it's working now.