CODEWITHSUNDEEP
javascriptreactjsredux
Sven
Sven

Reputation: 2889

Redux: props are undefined when rendering

trying to implement ReactRedux with my own example, I'm a bit struggling. It appears as if my props aren't given any value and are still undefined when React renders them. Is my approach in general correct and only a simple error or is there something really wrong?

I've recreated my problem in jsbin:

class Walls extends React.Component {
    render() {
    return (
        <div id="main">
            <div>volume: {this.props.volume}m³</div>
        </div>
    )}
}

const mapStateToProps = (state) => {
    return {
        volume: state.volume
    };
}

const WallContainer = connect(mapStateToProps)(Walls);

function reducer(state = Map(), action) {
  switch (action.type) {
  case 'SET_STATE':
    return state.merge(action.state);
  }
  return state;
} 

const store = createStore(reducer)
store.dispatch({
    type: 'SET_STATE',
    state: {"volume":1567.571734691151}
})

ReactDOM.render(
        <Provider store={store}>
            <WallContainer />
        </Provider>, 
        document.getElementById('root')
);

Upvotes: 0

Views: 2850

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

You just have to map back from Immutable Map when you connect, otherwise your approach looks correct to me:

const mapStateToProps = (state) => {
    return {
        volume: state.get('volume')
    };
}

Remember that at this point, state is still an Immutable Map, not just a JavaScript object.

Upvotes: 3

Related Questions