Javascript 如何使用动态键设置Redux状态？

我的应用程序呈现视频列表，单击每个视频获取并呈现为此视频发布的评论列表

我正在尝试设置我的Redux存储，以根据视频ID生成一个带有键的reducer，并将相关注释存储为数组。这样做的目的是缓存这些ID，并在视频之间切换时，显示已获取的内容，然后根据请求对更多结果进行分页

我是这样做的：

const byVideo = (state = {}, action) => {
  const comments = (state = [], action) => {
    switch (action.type) {
      case GET_COMMENTS_SUCCESS:
        return action.comments.map(comment => comment._id);
      default:
        return state;
    }
  };

  switch (action.type) {
    case GET_COMMENTS_SUCCESS:
      return {
        [action.videoId]: comments(state[action.videoId], action)
      };
    default:
      return state;
  }
};

我遇到的问题是mapStateToProps和我的选择器。mapStateToProps在my action触发、获取数据以及在reducer中创建动态键之前计算了数据。因此，当我试图映射与该键关联的注释ID列表时，我得到“无法读取未定义的属性‘map’”

Specifically on:
getVisibleComments
reducers/index.js:33
   30 | export const getVisibleComments = (state, videoId) => {
   31 |   const ids = fromComments.getIds(state.comments, videoId);
   32 |   console.log(ids);
 > 33 |   return ids.map(id => fromComments.getComment(state.comment, 
   id));
   34 | };

我曾尝试遵循Redux Reddit API=的示例，其中reducer键也是通过[action.subreddit]动态创建的

这里是否有生成动态密钥的替代解决方案，或者我注定要使用当前的方法，因为mapStateToProps总是在组件完全装载和调度我的获取之前进行计算

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { fetchComments } from '../store/actions/comments';
import { getVisibleComments, getIsCommentsFetching } from 
'../store/reducers';
import CommentList from './commentList';

class visibleCommentList extends Component {
  componentDidMount() {
    const { vimeo_id } = this.props.match.params;
    this.props.fetchComments(vimeo_id);
  }

  render() {
    const { isFetching, comments } = this.props;

    return <CommentList isFetching={isFetching} data={comments} />;
  }
}

const mapStateToProps = (state, ownProps) => {
  const vimeo_id = ownProps.match.params.vimeo_id;
  return {
    comments: getVisibleComments(state, vimeo_id),
    isFetching: getIsCommentsFetching(state)
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    { fetchComments }
  )(visibleCommentList)
);

//根部减压器

import { combineReducers } from 'redux';
import createVideoIdsList, * as fromList from './createVideoIdsList';
import byIds, * as fromById from './byIds';
import comments, * as fromComments from './commentsByIds';

const listByFilter = combineReducers({
  all: createVideoIdsList('all'),
  plays: createVideoIdsList('plays'),
  likes: createVideoIdsList('likes'),
  release_date: createVideoIdsList('release_date'),
  comments: createVideoIdsList('comments')
});

const rootReducer = combineReducers({
  byIds,
  listByFilter,
  comments
});

export default rootReducer;

export const getVisibleVideos = (state, filter) => {
  const ids = fromList.getIds(state.listByFilter[filter]);
  return ids.map(id => fromById.getVideo(state.byIds, id));
};

export const getIsFetching = (state, filter) =>
  fromList.getIsFetching(state.listByFilter[filter]);

export const getVisibleComments = (state, videoId) => {
  const ids = fromComments.getIds(state.comments, videoId);
  console.log(ids);
  return ids.map(id => fromComments.getComment(state.comment, id));
};

export const getIsCommentsFetching = state =>
  fromComments.getIsCommentsFetching(state.comments); 

---

我通过重新构造我的还原程序并向mapStateToProps添加以下行来获得要显示的注释。注释：getComments（state，video_id）| |[]const mapStateToProps=（state，ownProps）=>{const video_id=ownProps.match.params.video_id；返回{comments:getComments（state，video_id）| |[]，isFetching:getIsCommentsFetching（state）}；}；然而，我看到的是组件重新呈现了3次，前2次注释状态为“未定义”。下面是我的还原程序。有什么建议吗？

import { combineReducers } from 'redux';
import createVideoIdsList, * as fromList from './createVideoIdsList';
import byIds, * as fromById from './byIds';
import comments, * as fromComments from './commentsByIds';

const listByFilter = combineReducers({
  all: createVideoIdsList('all'),
  plays: createVideoIdsList('plays'),
  likes: createVideoIdsList('likes'),
  release_date: createVideoIdsList('release_date'),
  comments: createVideoIdsList('comments')
});

const rootReducer = combineReducers({
  byIds,
  listByFilter,
  comments
});

export default rootReducer;

export const getVisibleVideos = (state, filter) => {
  const ids = fromList.getIds(state.listByFilter[filter]);
  return ids.map(id => fromById.getVideo(state.byIds, id));
};

export const getIsFetching = (state, filter) =>
  fromList.getIsFetching(state.listByFilter[filter]);

export const getVisibleComments = (state, videoId) => {
  const ids = fromComments.getIds(state.comments, videoId);
  console.log(ids);
  return ids.map(id => fromComments.getComment(state.comment, id));
};

export const getIsCommentsFetching = state =>
  fromComments.getIsCommentsFetching(state.comments);