无法访问 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;

现在，我在访问我的 cmets 状态时遇到问题。我的 CommentsReducer 减速器如下所示：

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

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

编辑 1： 添加状态截图：

EDIT 2条件渲染：

{
            (createStoreWithMiddleware.getState().comments) ?

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

          }

EDIT 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

您需要检查一些事项

首先：下面的reducer是一个注释reducer，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) { 中的帖子和组件是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};
}

第三：既然 cmets 是使用 fetchComments 操作更新的，你应该在组件中使用它之前检查评论，比如

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

或者如果你在 JSX 中使用它，像这样使用它

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

Answer 2

由于您在 mapStateToProps 中使用了“评论”。

您可以使用 {this.props.comment} 而不是 {this.props.cmets} 访问它

如果这有帮助，请告诉我。

Answer 3

你必须从 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);