Redux Thunk с рендерингом с использованием класса App - PullRequest
Новая
       23

Redux Thunk с рендерингом с использованием класса App

0 голосов
/ 04 мая 2019

Redux thunk с рендерингом с использованием класса App - я использую реагирующую нативную и redux thunk для вызова диспетчера через componentDidMount класса App и получаю сообщения об ошибках «props is notfined» и «Unable to find module for EventDispatcher». Запросить дополнительную помощь по этому вопросу у экспертов.

index.js 

import React from 'react';
import {AppRegistry} from 'react-native';

import {Provider} from 'react-redux';
import configureStore from './configureStore';
import App from './App';
import {name as appName} from './app.json';

const store = configureStore();

const rnredux = () => (
    <Provider store={store}>
        <App />
    </Provider>
)

AppRegistry.registerComponent(appName, () => rnredux);

app.js 

import React from 'react';
import {Platform, TouchableHighlight, StyleSheet, Text, View} from 'react-native';
import {connect} from 'react-redux'
import {fetchPeopleFromAPI} from './actions'


class App extends React.Component {
  componentDidMount() {
    this.props.getPeople();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native! & Redux</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <TouchableHighlight onPress={props.getPeople} style={styles.buttonText}>
          <Text>Fetch Data</Text>
        </TouchableHighlight>
        {
          isFetching && <Text>Loading</Text>
        }
        {
          people.length? (
            people.map((person,index) => {
              return (
                <View key={index}>
                 <Text>Name: {person.breedName}</Text>
                </View>
              )
            })
           ) : null
          }
      </View>
    );
  }
}

const {people, isFetching} = props.people
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  buttonText: {
    backgroundColor: 'red',
    height:60,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

function mapStateToProps (state) {
  return {
    people: state.people
  }
}

function mapDispatchToProps (dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

1 Ответ

0 голосов
/ 04 мая 2019

Полностью удалите эту часть из вашего кода: 

function mapDispatchToProps (dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

в вашем экспортном заявлении изменить на: 

export default connect(
  mapStateToProps,
 { fetchPeopleFromAPI }
)(App)

и, наконец, в вашем componentDidMount: 

componentDidMount() {
    this.props.fetchPeopleFromAPI();
  }
...