Невозможно получить доступ к вложенному массиву в объекте в response-redux

Question

Здравствуйте, я новичок в редуксе и борюсь с проблемой. Я пытаюсь получить доступ и нанести на карту комментарии в моем массиве сообщений. Однако я не уверен, как это сделать. До сих пор я пытался изменить действия и редукторы, чтобы решить эту проблему. Я думаю, что проблема в реакции и избыточности. Я не могу сказать, правильно ли работает мой mapStateToProps. Кроме того, состояние извлекается из моего express сервера, и, похоже, оно работает правильно, как вы можете видеть на рисунке.

Мое действие 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, мы уже некоторое время используем этот способ в нашей prod env.

Сначала восстановитель (вы можете сделать этот преобразователь еще более сложным)

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

Таким образом вы можете go один способ сделать с вложенным хранилищем избыточных данных.
Для сложной (4-5 уровней) и множественной (> 2 раза) структуры данных существуют другие способы, но в большинстве случаев этого достаточно.