Я пытаюсь использовать редукцию с реакцией. Я создал пример приложения для выборки данных, затем я просто хотел использовать его с методом mapDispatchToProps. Я прочитал документацию и посмотрел какой-то учебник, он выглядит похоже.
Проблема в том, что когда я пытаюсь использовать mapDispatchToProps, возвращается ошибка:
ReferenceError: ReferenceError: не удается найти переменную: отправка
На домашнем экране появляется ошибка
Мой главный экран
import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import { getPosts } from '../actions/index';
class HomeScreen extends React.Component {
state = {
data:[],
}
componentDidMount() {
this.props.getPosts()
}
render() {
return (
<View style = {styles.container}>
</View>
);
}
}
function mapStateToProps (state) {
return {
posts: state.posts
};
};
function mapDispatchToProps (dispatch) {
return {
getPosts: () => {
dispatch(getPosts())
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
Мой магазин
import { createStore } from 'redux';
import rootReducer from '../reducers';
export default store = createStore(rootReducer);
Мои действия
import { GET_PGET_POST_LOADING,GET_POST_RECEIVED,GET_POST_ERROR } from './actionTypes';
import { GET_POST_URL } from '../api';
export const getPosts = () => {
dispatch({
type: GET_POST_LOADING
});
fetch(GET_POST_URL).then((data) => {
console.info(data);
dispatch({
type:GET_POST_RECEIVED,
payload:data
})
}).catch((error) => {
console.info(error)
})
}
Мой Редуктор
import { GET_POST_LOADING, GET_POST_RECEIVED, GET_POST_ERROR } from '../actions/actionTypes';
const Post = (state = { posts: [] , loading: true }, action) => {
console.info(action);
switch(action.type) {
case GET_POST_LOADING:
return {
...state,
loading: true
}
case GET_POST_RECEIVED:
return {
loading:false,
posts: action.payload
}
case GET_POST_ERROR:
return state;
default: return state;
}
}
export default Post;
Мои приложения
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';
import { Provider } from 'react-redux';
import store from './store/index';
export default class App extends React.Component {
state = {
isLoadingComplete: false,
};
render() {
return (
<Provider store = {store}>
<View style = {styles.container}>
{Platform.OS === 'ios' && <StatusBar barStyle = "default" />}
<AppNavigator />
</View>
</Provider>
);
}
}
Я новичок в Redux, что я пропустил?
Заранее спасибо :)
Вы вообще используете redux-thunk?
Спасибо за ваши комментарии. Я искал и понял, что мне нужно использовать redux-thunk, но я решил проблему с использованием redux-axios-middleware. Но я не понимаю, почему я не могу использовать метод fetch в действии?
Создатели действий должны возвращать простые объекты. Если вы использовали аксиомы или любую другую функцию — она становится асинхронной, потому что возвращает обещание вместо простого объекта. Использование redux-thunk или подобных промежуточных программ решает эту проблему.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В
dispatchнет ссылки наdispatch({ type: GET_POST_LOADING });. Возможно, вы захотите взглянуть на redux-thunk.