无法访问react-redux中对象内的嵌套数组

Question

您好，我是Redux的新手，我正为一个问题而苦苦挣扎。我正在尝试访问并映射我的帖子数组中的评论。但是，我不确定如何执行此操作。到目前为止，我已经尝试过更改操作和减少器以解决此问题。我认为问题出在React和Redux之内。我无法判断我的mapStateToProps是否正常工作。另外，该状态正在从我的快递服务器中获取，并且您可以在图片中看到它的状态。

我的getPost操作：

export const getPost = (group_id, post_id) => async dispatch => {
  try {
    const res = await axios.get(`/api/groups/${group_id}/${post_id}`);

    dispatch({
      type: GET_POST,
      payload: res.data
    });
  } catch (error) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: error.response.statusText, status: error.response.status }
    });
  }
};

初始状态：

const initialState = {
  groups: [],
  group: [],
  loading: true,
  error: {}
};

减速器：

case GET_POST:
  return {
  ...state,
  post: payload,
  loading: false
};

我要在评论上绘制地图的地方

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getPost } from '../../../redux/actions/group';

const Post = ({ getPost, post, match }) => {
  useEffect(() => {
    getPost(match.params.group_id, match.params.post_id);
  }, [getPost, match.params.group_id, match.params.post_id]);

  // I want to map over the comments here
  return (
      {post.comments.map(comment => ({ comment }))}
  );
};

Post.propTypes = {
  getPost: PropTypes.func.isRequired,
  group: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  post: state.post
});

export default connect(mapStateToProps, { getPost })(Post);

Answer 1

您可以使用redux通过一些技巧来访问嵌套对象，我们在产品环境中使用这种方式已有一段时间了。

首先是减速器（您可以使该减速器更加复杂）

const LocalStorageReducer = createReducer<Store['localStorage']>(
  new LocalStorage(),
  {
    saveLocalStorageItem(state: LocalStorage, action: any) {
      return {...state, [action.payload.item]: action.payload.value}; // <= here
    },
  }
);

操作

export const actions = {
  saveLocalStorageItem: (payload: InputAction) => ({type: 'saveLocalStorageItem', payload}),
};

对于类型InputAction

export class InputAction {
  item: string;
  value: string | Array<string> | null | boolean;
  constructor() {
    this.item = '';
    this.value = null;
  }
}

针对组件中的处理程序

this.props.saveLocalStorage({ item: 'loading', value: false });

通过这种方法，您可以对嵌套的redux存储进行处理。
对于复杂的（4-5级）和多个（> 2倍）的数据结构，还有其他方法，但是在大多数情况下，这已经足够了。