Undefined redux-react state in componet

Question

I am implementing a project where the data going to be shared in different components. So I decided to use redux-react for state management.

I used redux react async api call to get data from api. However I got undefined when the component mounted for the first time and returned actual data.

However, when I tried to implement some function on returned data, I got this error:

"Cannot read property of undefined"

I can see the state in redux developer tools and it has data and the logs function display action correctly. I can not understand why I am getting undefined. Here is my code:

const initialState = {  
    candidate: {},
    companies: [], 
    offers: [], 
    moreStatehere:...
  }

Reducer for the candidate

export default function profileReducer(state = initialState, action) {  
    switch(action.type) {

      case FETCH_POSTS_FAILURE:
      return Object.assign({}, state, {
        didInvalidate: true
      })

      case REQUEST_PROFILE:
      return Object.assign({}, state, {
        isFetching: true,
        didInvalidate: false
      })

      case RECEIVE_PROFILE:
      return {
        ...state, 
        candidate: action.data
      }

      default: 
        return state;
    }
  }

root reducer

const rootReducer =  combineReducers({
  profiles: profileReducer
})

export default rootReducer; 

create store

const composeEnhanser = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;
const loggerMiddleware = createLogger()


export default function configureStore() {  
  return createStore(
    rootReducer,
    composeEnhanser(applyMiddleware(thunkMiddleware,
      loggerMiddleware))
  );
}

index.js

const store = configureStore(); 

const app = (
  <Provider store= {store}>
    <BrowserRouter>
     <App/>
    </BrowserRouter>
    </Provider>
)


ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

action creator/api call

export function feachProfiles() {
  return function (dispatch) {
    dispatch(requestProfile)
    return fetch(API_URL)
      .then(
        response => response.json(),
        error => console.log('An error occurred.', error)
      )
      .then(json =>
        dispatch(receiveProfile(json))
      )
  }
}

componentuse

class CandidatesList extends Component {

    constructor (props){
        super (props)
      }

    componentWillMount() {
            this.props.feachProfiles(); 

        }

    handleClick() {
      }

      componentWillUnmount() {
      }  

    render() {     
   const candidate = this.props.profiles.map(profile=>(
       <div> </div>
   )); 

        return (
            <div>
                 <ViewCandidate
                 />
            </div>
        );
    }
}


const mapStateToProps = state => {
    return {
      profiles: state.profiles.candidate || []
      }
    }
const mapDispatchToProps = (dispatch) => {
        return {
            feachProfiles: bindActionCreators(feachProfiles, dispatch)
        }
    }

  export default connect(mapStateToProps, mapDispatchToProps)(CandidatesList);  

action RECEIVE_PROFILE @ 
redux-logger.js:1  prev state {profiles: {…}}
redux-logger.js:1  action     {type: "RECEIVE_PROFILE", data: {…}}
redux-logger.js:1  next state {profiles: {…}}

Answer 1

make sure to write this just before map function

if (this.props.profiles.length === 0) return null;

this.props.profiles should have array length of greater than 0

  const candidate = this.props.profiles.map(profile=>(
           <div> </div>
       ));