Загрузка параметра из магазина не определена

Question

У меня есть экран с заданиями, которые я получаю из API. На моем экране я хочу показать сообщение до тех пор, пока задания не будут выбраны, а затем отобразить их на экране. Я запускаю выборку заданий в componentDidMount (), а затем пытаюсь отобразить их в RenderJobs (). Проблема в том, что props.isLoading не определен по любой причине.

В настоящее время я использую жестко закодированные значения для вызова API. Как только я получу данные для правильного отображения, я изменю это.

Вот мой 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>
        )
    }
}

Это мой редуктор:

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;
  }
};

И это создатель действия:

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
    });

Я ожидаю, что произойдут 2 вещи.

1. В функции RenderJobs () я рассчитываю на props.isLoading, чтобы получить состояние загрузки. Однако это не определено. В журналах видно, что отправлено действие JOBS_LOADING, и что данные о заданиях выбраны правильно.

2. Как только данные о заданиях будут получены, я ожидаю, что они будут отображаться в пользовательском интерфейсе. Однако это не так - я просто вижу пустой экран.

Любая помощь будет принята с благодарностью!

Answer 1

isLoading будет неопределенным при первом рендере, так как вы не определили никакого значения по умолчанию.Вы можете указать значение по умолчанию, используя реквизиты по умолчанию.

Jobs.defaultProps = {
  jobs: {
    isLoading: false
  }
}

Answer 2

Я выяснил, в чем проблема. В моем файле configureStore.js я забыл добавить редуктор заданий в магазин. Спасибо всем за ваши ответы!

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};
}

Answer 3

Похоже, вы забыли добавить isLoading в ваш mapStateToProps.