Интеграция Pull-To-Refresh в ScrollView с Redux в React Native

Я пытаюсь добавить функциональность «потянуть для обновления» на <ScrollView> с помощью refreshControl и интегрировать ее с Redux.

Пример из https://facebook.github.io/react-native/docs/refreshcontrol:

_onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
}

Моя проблема в том, что моя собственная функция fetchData отправляет действие, которое должен обработать редуктор, поэтому, насколько я понимаю, это не годное обещание. Поэтому я не совсем понимаю интеграция с Redux в этом случае. Что мне нужно изменить в моем коде, чтобы иметь возможность установить для refreshing значение false, как в приведенном выше примере?


PostFeedScreen.js

// on mount, fetch all posts from the API
componentDidMount() {
    this.props.fetchPostsFromAPI();
}

_onRefresh = () => {
    this.setState( { refreshing: true } );
    this.props.fetchPostsFromAPI().then( () => { // error
        this.setState( { refreshing: false } );
    });
}

// map dispatch to props
const mapDispatchToProps = ( dispatch ) => {
    return {
        fetchPostsFromAPI: () => {
            dispatch( fetchPostsFromAPI() );
        }
    }
}

PostActions.js

// fetch all posts
export function fetchPostsFromAPI() {
    return( dispatch ) => {
        let loadData = new Promise( ( resolve, reject ) => {
            resolve( postsInitial ); // using dummy data for now
        })
        loadData
            .then( posts => dispatch( fetchPostsSuccess( posts ) ) );
}

// is used if posts were succesfully loaded
function fetchPostsSuccess( posts ) {  
    return {
        type: PostConstants.FETCH_POSTS_SUCCESS,
        data: posts,
    }
}

PostReducer.js

const PostReducer = ( state = initialState, action ) => {

    switch( action.type ) {

        // if fetching data was successful
        case PostConstants.FETCH_POSTS_SUCCESS: {
            return {
                ...state,
                posts: action.data,
            }
        }

        default: {
            return state
        }
}
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
782
1

Ответы 1

Вы получаете сообщение об ошибке, потому что вызываете .then для чего-то, кто не возвращает обещания. Просто добавьте return перед вашим loadData, потому что вы можете связать обещания.

export function fetchPostsFromAPI() {
  return dispatch => {
    let loadData = new Promise((resolve, reject) => {
      resolve(postsInitial);
    });

    return loadData.then(posts => dispatch(fetchPostsSuccess(posts)))
  };
}

Я добавил заявление о возврате. По-прежнему появляется ошибка: undefined is not an object (evaluating _this.props.fetchPostsFromAPI().then').

Ben 14.10.2018 02:35

Нашел проблему. В mapDispatchToProps мне нужно было добавить перед отправкой return, т.е. return dispatch( fetchPostsFromAPI() );

Ben 14.10.2018 02:49

Хороший улов :) Хорошая работа

EQuimper 14.10.2018 07:30

Другие вопросы по теме