Reduce Reducer вызывает аварийное завершение работы приложения expo, когда вызывается Reducer или когда страница Rerender Reduce Props отображает

Question

Я пытаюсь передать объект в редукторный редуктор, и я могу получить данные до него, однако, когда я нажимаю кнопку, приложение expo вылетает без индикатора ошибки.

Если я не изменю состояние, кнопка отправки работает нормально.Но если я попытаюсь, я получу сбой приложения.Я не думаю, что это цикл рендеринга, который вызывает сбой.но не уверены, в каком направлении идти отсюда.

//reducer page
import { ADD_NEW_PROGRAM } from "../actions/programActions";

export const inititalState = {
  programList: [{ title: "Title", description: "Dez Nuts, got em" }]
};

export default function(state = inititalState, action) {
  switch (action.type) {
    case ADD_NEW_PROGRAM:
      console.log("inside reducer", action.payload.title);
      return { // this is causing the crash I believe, should be correct to push/add to the initalState array.
        ...state,
        programList: [...state.programList, action.payload]
      };

    default:
      return state;
  }
}

import React, { Component } from "react";
import { Text, View } from "react-native";
import * as firebase from "firebase";
require("firebase/firestore");
import { connect } from "react-redux";

import Program from "./Program";
import { CreateButton } from "../Buttons/Buttons";
import { globalStyles } from "../../index";
import { addProgramAction } from "../../actions/programActions";

class ProgramContainer extends Component {
  static navigationOptions = {
    title: "Programs"
  };

  constructor(props) {
    super(props);
  }

  componentDidUpdate() {
    const newProgram = this.props.navigation.getParam("completed", false);
    const data = {
      title: this.props.navigation.getParam("name"),
      description: this.props.navigation.getParam("description")
    };

    newProgram ? this.props.addProgramAction(data) : null;
  }


  render() {
    const { programList } = this.props;
    const { navigation } = this.props;

    return (
      <View style={{ flex: 1 }}>
        <Program add={this.addToDatabase} programList={programList} /> // this is where the array will .map
        <CreateButton navigation={this.props.navigation} /> // this is the submit button
      </View>
    );
  }
}

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

export default connect(
  mapStateToProps,
  { addProgramAction }
)(ProgramContainer);

import React from "react";
import { View, Text } from "react-native";
import { List, ListItem } from "react-native-elements";


const Program = ({ add, programList }) => {
  return (
    <View style={{ flex: 1 }}>
      <List containerStyle={{ marginBottom: 20 }}>
        {programList.map(obj => (
          <ListItem
            roundAvatar
            avatar={{}}
            avatarContainerStyle={{ backgroundColor: "#d9534f" }}
            key={obj.title}
            title={obj.title}
            subtitle={obj.description}
            onPress={() => {
              console.log("no functions");
            }}
          />
        ))}
      </List>
    </View>
  );
};

export default Program;