無法訪問React組件中的Redux狀態

Question

我試圖將redux狀態顯示在我的react組件中。我的root reducer看起來像這樣：

index.js

import { combineReducers } from 'redux';
import PostReducer from './PostsReducer';
import { reducer as formReducer} from 'redux-form';
import CategoriesReducer from './CategoriesReducer';
import CommentsReducer from './CommentsReducer';

const rootReducer = combineReducers({
    posts: PostReducer,
    categories: CategoriesReducer,
    comments: CommentsReducer,
    form : formReducer
});

export default rootReducer;

現在，我在訪問我的評論狀態時遇到了問題。我的評論 Rededcer reducer如下所示：

CommentsReducer.js

import { FETCH_COMMENTS } from '../actions/comment_action';

export default function(state={}, action) {
    switch (action.type) {
      case FETCH_COMMENTS:
          return {comments: {...state.comments, ...action.payload.data}};

      default:
        return state;
    }
}

在我的組件中，我試圖在mapStateToProps方法中獲取狀態 ，如下所示：

function mapStateToProps({ posts, comments }, ownProps) {
    return {
      post: posts[ownProps.match.params.id],
      comment: comments[ownProps.match.params.id]};
}

現在，在我的渲染函數中，如果我嘗試將注釋狀態設置為{this.props.comments} ，我會收到null。我的意思是它沒有顯示任何內容。我該怎么辦？

編輯1：添加州的屏幕截圖：

編輯2條件渲染：

{
            (createStoreWithMiddleware.getState().comments) ?

              <div>
                  {this.props.comment}
              </div>
                                                  :
              <div>
                Null
              </div>

          }

編輯3 ：api服務器中的Comment.js文件。

const defaultData = {
  "894tuq4ut84ut8v4t8wun89g": {
    id: '894tuq4ut84ut8v4t8wun89g',
    parentId: "8xf0y6ziyjabvozdd253nd",
    timestamp: 1468166872634,
    body: 'Hi there! I am a COMMENT.',
    author: 'thingtwo',
    voteScore: 6,
    deleted: false,
    parentDeleted: false
  },
  "8tu4bsun805n8un48ve89": {
    id: '8tu4bsun805n8un48ve89',
    parentId: "8xf0y6ziyjabvozdd253nd",
    timestamp: 1469479767190,
    body: 'Comments. Are. Cool.',
    author: 'thingone',
    voteScore: -5,
    deleted: false,
    parentDeleted: false
  }
}

我的API端點描述如下：

GET /comments/:id
      USAGE:
        Get the details for a single comment

編輯4輸出的屏幕截圖。

Answer 1

由於您在mapStateToProps中使用了“comment”。

您可以使用{this.props.comment}訪問它而不是{this.props.comments}

如果這有幫助，請告訴我。

Answer 2

你必須從react-redux導入connect方法然后使用mapStateToProps到connect方法，如：

      import { connect } from 'react-redux';
      class ComponentName extends Component {
      }
      function mapStateToProps({ posts, comments }, ownProps) {
        return {
            post: posts[ownProps.match.params.id],
            comment: comments[ownProps.match.params.id]};
      }  
      export default connect(mapStateToProps)(ComponentName);

Answer 3

您需要檢查一些事項

第一：下面的reducer是一個評論減速器， state.comments沒有定義，所以...state.comments將失敗。 所以你需要更新initialState，如state = {comments: {}}

import { FETCH_COMMENTS } from '../actions/comment_action';

export default function(state = {comments: {}}, action) {
    switch (action.type) {
      case FETCH_COMMENTS:
          return {comments: {...state.comments, ...action.payload.data}};

      default:
        return state;
    }
}

第二：在mapStateToProps function mapStateToProps({ posts, comments }, ownProps) { posts和components是reducers，因此posts[ownProps.match.params.id]和comments[ownProps.match.params.id]不是你想要的但是

function mapStateToProps({ posts, comments }, ownProps) {
    return {
      post: Object.values(posts.posts).find(post => post.id ===ownProps.match.params.id),
      comment: Object.values(comments.comments).find(comment => comment.id ===ownProps.match.params.id};
}

第三：現在使用fetchComments操作更新注釋，您應該在組件中使用它之前檢查注釋

if(this.props.comment) {
    //do what you want with comment here
}

或者如果您在JSX中使用它，請使用它

{this.props.comment ? <div>{this.props.comment}</div>: null}