Baz Baz - 3 months ago 22
React JSX Question

Unable to set properties using react-redux

I'm trying to get the following code to work where I am using both react and redux. The problem is that

this.props.comments
is undefined, what am I doing wrong?

reducer.js:

import {Map,List} from 'immutable';

const initialState = Map({comments:List()});

export default function(state = initialState, action) {

switch (action.type) {
case 'ADD_COMMENT':
return state.update('comments', comments => comments.push(action.comment));

default: return state;

}
}


index.js

import React from 'react';
import ReactDOM from 'react-dom';
import CommentBoxContainer from './components/CommentBox';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './reducer'

const store = createStore(reducer);

store.dispatch({
type: 'ADD_COMMENT',
comment:
{id: 3, author: "Me", text: "This is one comment!"}
});

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


CommentBox.js

import React from 'react';
import { connect } from 'react-redux';

const CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList comments={this.props.comments}/>
<CommentForm />
</div>

);
}
});

function mapStateToProps(state) {
return { comments: state.comments };
}

const CommentBoxContainer = connect(mapStateToProps)(CommentBox);
export default CommentBoxContainer;

var CommentList = React.createClass({
render: function() {

var commentNodes = this.props.comments.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});

const CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
</div>
);
}
});

const Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});

Answer

state is Map from immutable.js. So in mapStateToProps, state.comments is undefined but state.get('comments') should not be.