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

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

0 голосов
/ 13 октября 2018

Я пытаюсь добавить функцию pull-to-refresh к <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
        }
}

1 Ответ

0 голосов
/ 13 октября 2018

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

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

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