Le chargement du paramètre à partir du magasin n'est pas défini

J'ai un écran avec des tâches que je récupère à partir d'une API. Dans mon écran, je souhaite afficher un message jusqu'à ce que les travaux soient récupérés, puis les afficher à l'écran. Je déclenche la récupération des travaux dans componentDidMount (), puis j'essaye de les afficher dans RenderJobs (). Le problème est que props.isLoading n'est pas défini pour une raison quelconque.

J'utilise des valeurs codées en dur pour l'appel API pour le moment. Une fois que j'aurai les données à afficher correctement, je changerai cela.

Voici mon JobsComponent:

export const fetchJobs = (address, job) => async (dispatch) => {
  dispatch(jobsLoading());
  var obj = {"origin": [26.1410638, 44.4346588], "job_details": ["Developer"]};
  //fetch the data
    .then(response => response.json())
    .then(jobs => dispatch(addJobs(jobs)))
    .catch(error => dispatch(jobsFailed(error.message)));
};


export const addJobs = (jobs) => ({
  type: ActionTypes.GET_JOBS,
  payload: jobs
});

export const jobsLoading = () => ({
  type: ActionTypes.JOBS_LOADING
});

export const jobsFailed = (errmess) => ({
  type: ActionTypes.JOBS_FAILED,
  payload: errmess
    });

Ceci est mon réducteur: p >

import * as ActionTypes from '../ActionTypes';

export const jobs = (state = {   isLoading: true,
                             errMess: null,
                             jobs:[]}, action) => {

switch (action.type) {
    case ActionTypes.GET_JOBS:
        return {...state, isLoading: false, errMess: null, jobs:     action.payload};

    case ActionTypes.JOBS_LOADING:
        return {...state, isLoading: true, errMess: null, jobs: []}

    case ActionTypes.JOBS_FAILED:
        return {...state, isLoading: false, errMess: action.payload};

    default:
      return state;
  }
};

Et voici le créateur de l'action:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchJobs} from '../redux/ActionCreators';

const mapStateToProps = state => {
    return {
        jobs: state.jobs
    }
}

const mapDispatchToProps = dispatch => ({
    fetchJobs: (address, jobTitle) => dispatch(fetchJobs(address,     jobTitle))
});

function RenderJobs(props) {
    console.log('In RenderJobs, props is: ' + props.jobsData + ' / '     + props.isLoading);

const renderJobItem = ({item, index}) => {
    return (
        //UI view to show data
    );
}

if (props.isLoading) {
    return (
        <View>
            <Text style={{fontSize: 30, color: colors.white}}>The     data is loading...</Text>
        </View>
    );
}
else if (props.errMess) {
    return(
        <View>
            <Text style={{fontSize: 30, color: colors.white}}>{props.errMess} </Text>
        </View>
    );
}
else {
    return (
        //UI view to show data
    );
}

}

class Jobs extends Component {
    componentDidMount() {
        this.props.fetchJobs([26.1410638, 44.4346588], "Developer");
    }
render() {
        return(
            <ScrollView contentContainerStyle={styles.bkg}>

                <RenderJobs 
                    jobsData={this.props.jobs}
                    isLoading={this.props.jobs.isLoading}
                    errMess={this.props.jobs.errMess} 
                    />
            </ScrollView>
        )
    }
}

Je m'attends à ce que deux choses se produisent.

1. Dans la fonction RenderJobs (), je compte sur props.isLoading pour me donner l'état de chargement. Cependant, il n'est pas défini. Je peux voir dans les journaux que l'action JOBS_LOADING est distribuée et que les données des travaux sont correctement récupérées.

2. Une fois les données des travaux récupérées, je m'attends à les afficher dans l'interface utilisateur. Cependant, ce n'est pas le cas - je vois juste un écran vide.

Toute aide sera grandement appréciée!