无法使用mapDispatchToProps连接组件

Question

我有一个带有Redux的React Native项目，我正在尝试将操作连接到组件。我有App.js文件，没有index.js文件。

这就是我实现Redux的方式：

App.js：

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { Provider } from 'react-redux';

import store from './src/store/Store.js';
import AppNavigator from './src/navigation/AppNavigator';

export default function App(props) {
  return (
    <Provider store = { store }>
      <View style={styles.container}>
        {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
        <AppNavigator />
      </View>
    </Provider>
  );
}

AppNavigator.js：

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    Main: MainTabNavigator
  })
);

[MainTabNavigator.js ：（仅相关部分）

import React from 'react'
import {connect} from 'react-redux';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import {HomeScreen} from '../screens/HomeScreen';
import * as CounterActions from '../store/actions/CounterActions';

let HomePage = connect(state => mapStateToProps)(HomeScreen);

const HomeStack = createStackNavigator(
    {
        Home: HomePage,
    },
    config
);

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  SettingsStack,
});

const mapStateToProps = (state) => {
    return {
        count: state.counter.count
    }
};

const mapDispatchToProps = {
    ...CounterActions
};

export default tabNavigator;

CounterActions.js：

export const increment = (number) => {
    return (dispatch) => {
        dispatch({ type: 'INCREMENT', number })
    }
};

export const decrement = (number) => {
    return (dispatch) => {
        dispatch({ type: 'DECREMENT', number })
    }
};

MainTabNavigator.js中的以下行将状态连接到HomeScreen组件的道具：let HomePage = connect(state => mapStateToProps)(HomeScreen);

HomeScreen.js：

import React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';

export const HomeScreen = (props) => {
  alert(JSON.stringify(props));
  return (
    <View style={styles.container}>
      <Text>COUNT FROM STORE: {props.count}</Text>
    </View>
  );
};

HomeScreen组件正确获取状态并呈现“计数”，但是如何连接动作？

我希望HomeScreen这样发送：

props.increment(1);

谢谢！

Answer 1

mapDispatchToProps是connect中第二个参数，react-redux.

我也认为您将第一个参数传递给connect错误。

尝试一下：

let HomePage = connect(mapStateToProps, mapDispatchToProps)(HomeScreen);