React Native - невозможно отобразить данные на другом экране

Question

Чего я хочу добиться, так это отображать данные на другом экране или в другом компоненте с помощью React Redux. Я использую последнюю версию React Redux и Redux.

Моя проблема - каждый раз, когда я хочу отобразить данные или когда я нажимаю кнопку (TouchableOpacity) в EventCreator.js, она не отображается. Я пытался проверить все свои коды, но не вижу опечаток или неправильных кодов.

Не стесняйтесь просить больше моих кодов. Спасибо!

ОБНОВЛЕНИЕ: Я перепробовал все коды для моего другого нового проекта, но с RNNV1. Таким образом, возможно, появятся новые коды для RNNv2, связанные с React Redux. Я предпочитаю всем зрителям сосредоточиться на проверке моих кодов о RNNv2, подключенном к React Redux. Спасибо!

Вот мои коды:

App.js, все мои зарегистрированные экраны.

import {Navigation} from 'react-native-navigation';
import React from 'react';

//Screens
import AuthScreen from './src/screens/Auth/Auth';
import EventMap from './src/screens/Map/Map';
import EventCreator from './src/screens/EventCreator/EventCreator';
import EventHome from './src/screens/Home/Home';
import EventPushScreen from './src/screens/EventPushScreen/EventPushSc';

//Redux
import { Provider } from 'react-redux';

import configureStore from './src/store/configureStore';

const store = configureStore();

//Register Screens
Navigation.registerComponentWithRedux("Event.AuthScreen", () => AuthScreen);
Navigation.registerComponentWithRedux("Event.Map", () => EventMap);
Navigation.registerComponent("EventCreator", () => (props) => (
  <Provider store={store}>
    <EventCreator {...props}/>
  </Provider>
), () => EventCreator);
Navigation.registerComponent("EventHome", () => (props) => (
  <Provider store={store}>
    <EventHome {...props}/>
  </Provider>
), () => EventHome);



//Start A App
Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [{
          component: {
            name: "Event.AuthScreen",
          }
        }],
        options: {
          topBar: {
            title: {
              text: 'Welcome',
              alignment: 'center'
            }
          }
        }
      }
     }
  });
});

Это мой первый экран с TextInput и Button (TouchableOpacity). EventCreator.js

import EventInput from '../../components/EventInput';

class EventCreator extends Component {

eventAddedHandler = (eventName) => {
  this.props.onAddEvent(eventName);
};

render() {
return (
  <View style={styles.container}>
    <EventInput onEventAdded={this.eventAddedHandler}/>
  </View>
);
}
};

const mapDispatchToProps = dispatch => {
  return {
    onAddEvent: (eventName) => dispatch(addEvent(eventName))
  };
};

export default connect(null, mapDispatchToProps)(EventCreator);

EventInput.js, это мой компонент, который подключен к EventCreate.js

class EventInput extends Component {
state = {
  eventName: ""
};

eventNameChangedHandler = (val) => {
this.setState({
  eventName: val
});
};

eventSubmitHandler = () => {
  if (this.state.eventName.trim() === "") {
    return;
  }

this.props.onEventAdded(this.state.eventName);
};

render () {
return (
  <View style={styles.inputAndButtonContainer}>
    <TextInput
      placeholder="Create your event"
      value={this.state.eventName}
      onChangeText={this.eventNameChangedHandler}
      style={styles.textInputContainer}
    />
    <TouchableOpacity onPress={this.eventSubmitHandler}>
      <View style={styles.buttonContainer}>
        <Text style={{color: 'black'}}>Add</Text>
      </View>
    </TouchableOpacity>
  </View>
);
}
};

Home.js, это то место, где я хочу отображать данные или FlatList.

class Home extends Component {

eventSelectedHandler = key => {
  const selEvent = this.props.events.find(event => {
    return event.key === key;
  });
  Navigation.push("EventHomeStack", {
    component: {
      name: "EventPushScreen",
      passProps: {
        selectedEvent: selEvent
      },
      options: {
        topBar: {
          title: {
            text: selEvent.name
          }
        }
      }
    }
  });
};

render() {
  return (
    <View>
      <EventList 
        events={this.props.events}
        onItemSelected={this.eventSelectedHandler}
      />
    </View>
  );
}
};

const mapStateToProps = state => {
  return {
    events: state.events.events
  };
};

export default connect(mapStateToProps)(Home);

EventList.js, другой компонент, подключенный к Home.js

import ListItem from './ListItem';

const eventList = (props) => {
  return (
    <FlatList 
      style={styles.listContainer}
      data={props.events}
      renderItem={(info) => (
        <ListItem
          eventName={info.item.name}
          eventImage={info.item.image}
          onItemPressed={() => props.onItemSelected(info.item.key)}
        />
      )}
    />
 );
 };

export default eventList;

listItem.js, другой компонент, подключенный к EventList.js

const listItem = (props) => (
  <TouchableOpacity onPress={props.onItemPressed}>
    <View style={styles.listItem}>
      <Image resizeMode="cover" source={props.eventImage} style={styles.eventImage}/>
      <Text>
         {props.eventName}
      </Text>
    </View>
  </TouchableOpacity>
 );

 export default listItem;

events.js (редуктор)

import {ADD_EVENT, DELETE_EVENT} from '../actions/actionTypes';

const initialState = {
  events: []
};

const reducer = (state = initialState, action) => {
  switch(action.type) {
    case ADD_EVENT:
      return {
        ...state,
        events: state.events.concat({
          key:  `${Math.random()}`, 
          name: action.eventName,
          image: {
            uri: "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
          }
        })
      };

case DELETE_EVENT:
  return {
    ...state,
    events: state.events.filter(event => {
      return event.key !== action.eventKey;
    })
  };
    default:
      return state;
  }
};

export default reducer;