Loading parameter from store is undefined - react-native

Question

I have a screen with jobs that I fetch from an API. In my screen, I want to show a message until the jobs are fetched, then display them on the screen. I am triggering the jobs fetch in componentDidMount(), then trying to display them in RenderJobs(). The problem is that props.isLoading is undefined for whatever reason.
I am using hardcoded values for the API call at the moment. Once I get the data to display properly, I'll change this.
Here is my JobsComponent:
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>
)
}
}
This is my reducer:
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;
}
};
And this is the action creator:
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
});
I am expecting for 2 things to happen.
In the RenderJobs() function, I am counting on props.isLoading to give me the loading state. However, it is undefined. I can see in the logs that the JOBS_LOADING action is dispatched, and that the jobs data is correctly fetched.
Once the jobs data is fetched, I expect it to be displayed in the UI. However, this is not the case - I just see a blank screen.
Any help will be greatly appreciated!

Answer 1

Looks like you have forgotten to add isLoading in your mapStateToProps.

Answer 2

isLoading will be undefined on first render as you have not defined any default value. You could provide default value using default props.
Jobs.defaultProps = {
jobs: {
isLoading: false
}
}

Answer 3

I found out what the issue was. In my configureStore.js, I had forgotten to add the jobs reducer to the store. Thanks to everyone for your answers!
import {jobTitles} from './reducers/jobTitles';
import {jobs} from './reducers/jobs';
import {persistStore, persistCombineReducers} from 'redux-persist';
import storage from 'redux-persist/es/storage';
export const ConfigureStore = () => {
const config = {
key: 'root',
storage,
debug: true
};
const store = createStore(
persistCombineReducers(config, {
jobTitles,
jobs //I added this line and it fixed the problem!
}),
applyMiddleware(thunk, logger)
);
const persistor = persistStore(store);
return {persistor, store};
}