Tomek Buszewski Tomek Buszewski - 2 months ago 28
React JSX Question

React Redux - props are undefined while rendering from Immutable

I want to incorporate ImmutableJS to my React app. So now my reducer looks like this:

import { Map } from 'immutable'

const initialState = Map({
data: [],
sections: []
});

const AppState = (state = initialState, action) => {
switch (action.type) {
case 'ADD_CONTENT':
return state.set('data', action.response);
case 'ADD_SECTION':
return state.set('sections', [ ...state.get('sections'), action.payload ]);
default:
return state;
}
};

export default AppState;


And this is all fine and good. But in my component I have
mapStateToProps
:

const mapStateToProps = (state) => {
const d = state.app.get('data');

return {
works: d.works,
pages: d.pages,
sections: state.app.get('sections')
}
};


and then I want to display the data:

{
this.props.works.map(d => {
return <div>d</div>
})
}


And I am getting


TypeError: this.props.works.map is not a function


When I
console.log
instead, I am getting that
this.props.works
is undefined. What can I do?

Answer

Since you're using Immutable JS

In your mapStateToProps

const mapStateToProps = (state) => {
  const d = state.app.get('data');

  return {
    works: d.works,
    ...

To access data from d, change the way you access data, From d.works to d.get('works')

  return {
    works: d.get('works'),
    pages: d.get('pages'),
    sections: state.app.get('sections')
  }
Comments