Обновления состояния Redux, но таблица не обновляется (даже при обновлении чистого и неизменного состояния)

Question

Я искал ответ на свою проблему и много узнал о том, чтобы не изменять ранее существовавший объект состояния редукции в редукторе. Моя проблема в том, что я вроде бы меняю свое состояние нормально (согласно devtools и журналам консоли), но по какой-то причине моя таблица не рендерится заново. Вот некоторые выходные данные devtools, которые показывают, что каким-то образом props были обновлены, но не состояние : devtools компонент props / state . У меня вопрос почему так ли это, что моя таблица не заполняется данными, когда мне кажется, что в моем хранилище редуксов есть необходимые данные?

Вот как выглядит пустая таблица: table

Это мой класс компонентов:

class Overview extends React.Component {

componentDidMount() {
this.props.getOverviewData();
}

render() {
const { overview } = this.props;
console.log(overview);
return (
  <div className={this.props.classes.divPadding}>
    <GridContainer>
      <GridItem lg={3} sm={4} xs={12}>
        <Typography
          className={this.site_name}
          variant="h6"
          color="textSecondary"
        >
          photoboothrental.co
        </Typography>
      </GridItem>

      <GridItem xs={12} md={4} lg={3}>
        <Card className={this.props.classes.fixedHeight}>
          <CardHeader color="success" stats icon>
            <CardIcon color="success">
              <TimelineIcon />
            </CardIcon>
            <p className={this.props.classes.cardCategory}>Average Rank</p>
            <h2 className={this.props.classes.cardTitle}>
              {/* {(
                overviewState.rows.reduce((total, row) => {
                  return total + row.last_data.rank;
                }, 0) / overviewState.rows.length
              ).toFixed(2)} */}
              {overview.latest_agg_rank}
            </h2>
          </CardHeader>
          <CardFooter stats>
            <div className={this.props.classes.stats}>
              <DateRange />
              Last Updated: 17/01/2020
            </div>
          </CardFooter>
        </Card>
      </GridItem>
      <GridItem xs={12} md={4} lg={3}>
        <Card className={this.props.classes.fixedHeight}>
          <CardHeader color="danger" stats icon>
            <CardIcon color="danger">
              <ArrowDownwardIcon />
            </CardIcon>
            <p className={this.props.classes.cardCategory}>
              Last {overview.last_x_days} Days Overall Up/Down
            </p>
            <h2 className={this.props.classes.cardTitle}>
              {overview.last_x_days_aggr_rank}
            </h2>
          </CardHeader>
          <CardFooter stats>
            <div className={this.props.classes.stats}>
              <DateRange />
              Last Updated: 17/01/2020
            </div>
          </CardFooter>
        </Card>
      </GridItem>
      <GridItem xs={12} md={4} lg={3}>
        <Card className={this.props.classes.fixedHeight}>
          <CardHeader color="danger" stats icon>
            {/* <CardIcon color="danger">
              <ArrowDownwardIcon />
            </CardIcon> */}
            <p className={this.props.classes.cardCategory}>
              Last {overview.last_x_days} Days Keyword Count
            </p>
            <h2 className={this.props.classes.cardTitle}>
              {overview.last_x_days_num_keywords}
            </h2>
          </CardHeader>
          <CardFooter stats>
            <div className={this.props.classes.stats}>
              <DateRange />
              Last Updated: 17/01/2020
            </div>
          </CardFooter>
        </Card>
      </GridItem>
      <GridItem xs={12}>
        <TableDynamic
          title={"Keyword List"}
          data={overview.data}
          columns={overview.columns}
        />
      </GridItem>
    </GridContainer>
  </div>
);
}
Overview.propTypes = {
  getOverviewData: PropTypes.func.isRequired,
  overview: PropTypes.object.isRequired
};

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

export default withStyles(styles)(
  connect(mapStateToProps, {
    getOverviewData
  })(Overview)
);

Мое действие - это просто ajax запрос к node.js бэкэнду:

export const getOverviewData = () => dispatch => {
  axios.get("/api/data/get_overview").then(res => {
    dispatch({
      type: GET_OVERVIEW,
      payload: res.data
    });
  });
};

Я консоль регистрирую ответ от моего бэкэнда, который выглядит примерно так:

бэкэнд-форма

мой редуктор выглядит так с initState , имеющим свойство data инициализировано в пустой массив []:

const rankTrackerOverviewReducer = (state = initState, action) => {
  switch (action.type) {
    case GET_OVERVIEW:
      const new_data = [
        ...state.data,
        ...action.payload.map(keyword => {
          return [
            keyword._id.replace(/\+/g, " "),
            keyword.latest_rank,
            keyword.avg_rank,
            keyword.best_rank,
            keyword.worst_rank
          ];
        })
      ];
      return {
        ...state,
        data: new_data
      };
    default:
      return state;
  }
};

export default rankTrackerOverviewReducer;

, и я объединил свой редуктор в ожидании создания других. Я довольно новичок в Javascript / Redux et c. и я скептически отношусь к тому, что это не что иное, как проблема неизменности, которую я не замечаю. Надеюсь, кто-нибудь может дать мне несколько советов! Большое спасибо.

Вот вывод для моего console.log(overview) Matt: