CODEWITHSUNDEEP
reactjsreact-redux
linuxNoob
linuxNoob

Reputation: 730

mapStateToProps must return a plain object. Instead received undefined

I'm trying to use ternary statement within mapStateToProps but it doesn't seem to be updating the state and I keep running into mapStateToProps must return a plain object. Instead received undefined. Is this syntax incorrect?

const mapStateToProps =  state => {
console.log("current state is:" + JSON.stringify(state.model));
state.model.selectedPerson ?
    {
        selectedCourse: state.model.selectedPerson.selectedCourse,
        startDate: state.model.selectedPerson.startDate,
        courseType: state.model.selectedPerson.courseType,
    } :
    {
        selectedCourse: [],
        startDate: '',
        courseType: '',
    };
};  

const reducers = Object.assign({}, { model: courseReducers });
export { reducers };

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

I'm trying to use a form within a custom modal and the container above is contained within 2 other parent containers. I have not explored using redux form yet.

Upvotes: 1

Views: 4280

Answers (3)

Kabyanil
Kabyanil

Reputation: 1

Apparently i was having the same error. my initial connect method was this 

const mapStateToProps = (state, props) => {
return {
    post: state.readMore
};
};
const mapActionsToProps = (dispatch, props) => {
// return bindActionCreators(
//     {
//         onTabChange: tabChange,
//         onReadMore: readMore
//     },
//     dispatch
// );
};
export default connect(
mapStateToProps,
mapActionsToProps
)(ParticularNewsTemplate);

i had my bindActionCreators() method commented out(it was commented because i was not passing any values from the ParticularNewsTemplate component). but uncommenting the bindActionCreators() method dismissed the error for me. i hope this helps someone.

my final code looks like this 

const mapStateToProps = (state, props) => {
return {
    post: state.readMore
};
};

const mapActionsToProps = (dispatch, props) => {
return bindActionCreators(
    {
        // onTabChange: tabChange,
        // onReadMore: readMore
    },
    dispatch
);
};

export default connect(
mapStateToProps,
mapActionsToProps
)(ParticularNewsTemplate);

Upvotes: 0

Austin Greco
Austin Greco

Reputation: 33554

As the other answer said, you just need to return the object. Here's maybe a cleaner way to extract the values and provide defaults using object destructuring:

const mapStateToProps = (state) => {
  console.log("current state is:" + JSON.stringify(state.model));
  const {
    selectedPerson: {
      selectedCourse = [],
      startDate = '',
      courseType = ''
    } = {}
  } = state.model;

  return {
    selectedCourse,
    startDate,
    courseType
  };
};

Upvotes: 1

Giang Le
Giang Le

Reputation: 7089

in method mapStateToProps you should return an object. Change to this

const mapStateToProps =  state => {
console.log("current state is:" + JSON.stringify(state.model));
return state.model.selectedPerson ?
    {
        selectedCourse: state.model.selectedPerson.selectedCourse,
        startDate: state.model.selectedPerson.startDate,
        courseType: state.model.selectedPerson.courseType,
    } :
    {
        selectedCourse: [],
        startDate: '',
        courseType: '',
    };
};

Upvotes: 2

Related Questions