ReferenceError: ReferenceError: не удается найти переменную: отправка

Я пытаюсь использовать редукцию с реакцией. Я создал пример приложения для выборки данных, затем я просто хотел использовать его с методом 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, что я пропустил?

Заранее спасибо :)

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

Sergiu Paraschiv 20.03.2019 16:59

Вы вообще используете redux-thunk?

Dupocas 20.03.2019 17:33

Спасибо за ваши комментарии. Я искал и понял, что мне нужно использовать redux-thunk, но я решил проблему с использованием redux-axios-middleware. Но я не понимаю, почему я не могу использовать метод fetch в действии?

Baran KARABOGA 22.03.2019 08:04

Создатели действий должны возвращать простые объекты. Если вы использовали аксиомы или любую другую функцию — она становится асинхронной, потому что возвращает обещание вместо простого объекта. Использование redux-thunk или подобных промежуточных программ решает эту проблему.

Abhishek Ghosh 17.02.2020 19:21
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
4
3 350
0

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