Я пытаюсь добавить функциональность «потянуть для обновления» на <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
}
}





Вы получаете сообщение об ошибке, потому что вызываете .then для чего-то, кто не возвращает обещания. Просто добавьте return перед вашим loadData, потому что вы можете связать обещания.
export function fetchPostsFromAPI() {
return dispatch => {
let loadData = new Promise((resolve, reject) => {
resolve(postsInitial);
});
return loadData.then(posts => dispatch(fetchPostsSuccess(posts)))
};
}
Нашел проблему. В mapDispatchToProps мне нужно было добавить перед отправкой return, т.е. return dispatch( fetchPostsFromAPI() );
Хороший улов :) Хорошая работа
Я добавил заявление о возврате. По-прежнему появляется ошибка:
undefined is not an object (evaluating _this.props.fetchPostsFromAPI().then').