Почему первая отправка данных в state пустая?

Question

Иван @BenderIsGreat34

junior front-end

React
Redux

Почему первая отправка данных в state пустая?

До создания компонента я создаю и пробегаюсь по массиву с фильмами и хочу их запушить в хранилище, чтобы потом при рендеринге взять все запушенные фильмы и зарендерить их. Но почему-то происходит первая отправка с пустым массивом, а вот на второй отправке уже пушатся все фильмы. Я не понимаю, это адекватное поведение и я просто не понимаю, как редакс работает или это мой косяк где-то?
Из-за того, что первый массив пустой компонент выкидывает ошибку, когда я пытаюсь пробежаться по массиву, а он пустой. В принципе можно решить проблему дополнительной проверкой, но хочу понять, почему вообще происходит первая отправка с пустыми данными.

import React, { Component } from "react";
import CardMovie from "../cardMovie/CardMovie";
import { addDefaultMovie } from "../../store/actions/actions";
import { connect } from "react-redux"; // связывает стейт со стором

const defaultMovies = [
  {
    Title: "Звёздные войны",
    boolWatched: true,
    boolFavorite: true,
    id: 0,
  },
  {
    Title: "Звёздный десант",
    boolWatched: true,
    boolFavorite: true,
    id: 1,
  },
];
class HomePage extends Component {
  constructor(props) {
    super(props);
    // добавляем данные фильма в хранилище
    defaultMovies.map((obj) => {
      const { addMovie } = this.props;
      const { Title } = obj,
        { boolWatched } = obj,
        { boolFavorite } = obj,
        { id } = obj;

      addMovie(Title, boolFavorite, boolWatched, id);
    });
  }

  render() {
    if (defaultMovies.length > 0) {
      return (
        <div className="container">
          <ul className="list-movies">
            {this.props.arr.map((film, index) => {
              return (
                <li testid={index}>
                  <h2>{film.Title}</h2>
                  <CardMovie testid={index} />
                </li>
              );
            })}
          </ul>
        </div>
      );
    }
    return (
      <div className="container">
        <h1>Hello world</h1>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    arr: state.changeDefaultMovies.testarr,
  };
}

const mapDispatchToProps = (dispatch) => {
  return {
    addMovie: (title, boolFavorite, boolWatched, id) => {
      dispatch(addDefaultMovie(title, boolFavorite, boolWatched, id));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

import {
  ADD_DEFAULT_MOVIE,
  TOGGLE_BUTTON,
  CLICK_BUTTON,
} from "../actions/actionsTypes";

const initialState = {
  testarr: [],
};

export function changeDefaultMovies(state = initialState, action) {
  switch (action.type) {
    case ADD_DEFAULT_MOVIE:
      return {
        testarr: [
          ...state.testarr,
          {
            title: action.title,
            boolWatched: action.boolWatched,
            boolFavorite: action.boolFavorite,
            id: action.id,
          },
        ],
      };

    case CLICK_BUTTON:
      return state;

    default:
      return state;
  }
}