2016-08-28 2 views
0

Я пытаюсь получить следующий код для работы, где я использую как реагирующие, так и сокращающие. Проблема в том, что this.props.comments не определено, что я делаю неправильно?Невозможно установить свойства с помощью реакции-редукта

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

ответ

1

state является Map от immutable.js. Таким образом, в mapStateToProps, state.comments является undefined, но state.get('comments') не должно быть.

Смежные вопросы