2016-08-28 15 views
0

私はreactとreduxの両方を使用しているところで、次のコードを取得しようとしています。問題はthis.props.commentsが定義されていないことです。何が間違っていますか?react-reduxを使用してプロパティを設定できません

reducer.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> 
    ); 
    } 
}); 

答えて

1

state

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がimmutable.jsからMapあります。したがって、mapStateToPropsでは、state.commentsundefinedですが、state.get('comments')であってはなりません。

関連する問題