Question

使用App类渲染的Redux thunk-我正在使用react-native和redux thunk通过App类的componentDidMount调用调度程序，并收到错误“未定义props”和“无法找到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)

Answer 1

从代码中完全删除此部分：

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

在您的出口对帐单中修改为：

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

最后进入您的componentDidMount：

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

Redux使用App类渲染渲染

1 个答案: