mapStateToProps returns no data, data is undefined

Question

My problem is that mapStateToProps returns undefined. Maybe I have some problems with dispatching in the state or maybe app rendering before data comes from the server? I can't understand. So app works right without redux with just componentDidMount, but I have some problems with redux So I have a top-level component App:

const App = () => {
  return (
    <Provider store={store}>
      <Screen />
    </Provider>
  )
}

I have store with thunk meddleware:

const store = createStore(reducer, applyMiddleware(ReduxThunk));

Two types of action:

export const fetchData = (newPhotos) => async (dispatch) => {
  function onSuccess(success) {
    dispatch({
      type: FETCH_DATA,
      payload: success})
      return success
  }
  function onError(error) {
    dispatch({type: FETCH_FAILED, error})
  }

  try {
    const URL = 'https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0';
    const res = await fetch(URL);
    const success = await res.json();
    console.log(success);
    return onSuccess(success);
  } catch (error) {
    return onError(error)
  }

};

reducer:

const initialState = {
  data: []
}

export default dataReducer = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case FETCH_DATA:
      return {
        data: action.payload
      }

    case FETCH_FAILED:
      return {
        state
      }
    default: return state;
  }   
}

combine reducers:

export default combineReducers({
  fetchedData: dataReducer
});

and my rendering component:

class HomeScreen extends Component {
  render() {
    console.log(this.props)
    const {navigation, data} = this.props;
    return (
      <ScrollView>
        <Header />
        <ImageList navigation={navigation} data={data}/>
      </ScrollView>
    )
  }
}

const mapStateToProps = state => {
  return {
    data: state.fetchedData.data
  }
}

export default connect(mapStateToProps, {fetchData})(HomeScreen);

Answer 1

fetchData action will not be called on its own. You need to call that explicitly(in componentDidMount and, probably, componentDidUpdate ) like

class HomeScreen extends Component {
  componentDidMount() {
    this.props.fetchData(/* I don't know where you are going to take newPhotos argument */);
  }

  render() {
     //...
  }
}