javascript - 无法访问 React 组件中的 Redux 状态

Question

我正在尝试将 redux 状态显示到我的 React 组件中。我的根 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;

现在，我在访问我的评论 状态时遇到问题。我的 CommentsReducer 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 方法中获取 state，如下所示:

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

现在，在我的渲染函数中，如果我尝试将评论状态设为 {this.props.comments}，我会收到 null。我的意思是它不显示任何内容。我该如何继续？

编辑 1: 添加状态截图:

EDIT 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

EDIT 4 输出的屏幕截图。

Answer 1

有几件事你需要检查

首先: 下面的缩减器是一个注释缩减器，state.comments 没有定义，所以 ...state.comments 会失败。所以你需要像 state = {comments: {}}

一样更新 initialState

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 是 reducer，因此 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}