无法使用 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 组件的 props： 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 是 react-redux. 中 connect 函数的第二个参数

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

试试这个：

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

Answer 2

最后通过以下方式解决了：

MainTabNavigator.js:

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

let HomePage = connect(state => mapStateToProps, dispatch => mapDispatchToProps(dispatch))(HomeScreen);

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

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

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

const mapDispatchToProps = (dispatch) => {
    return {
        increment: (number) => dispatch(increment(number)),
        decrement: (number) => dispatch(decrement(number))
    }
};

export default tabNavigator;

Answer 3

接下来，我们将对您的文件进行一些修改：

首先让我们修改您的MainTabNavigator.js，因为您只发布了相关部分，请确保对其余部分也执行此操作。

import React from 'react'
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import {HomeScreen} from '../screens/HomeScreen';

let HomePage = connect(state => mapStateToProps)(HomeScreen); // <===== Remove this

const HomeStack = createStackNavigator(
    {
        Home: HomePage, // <===== Make this HomeScreen instead of HomePage
    },
    config
);

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

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

const mapDispatchToProps = {
    ...CounterActions
};

export default tabNavigator;

我们想要的是在主屏幕本身（或任何其他屏幕）上映射状态和道具

现在让我们转到您的HomeScreen.js：

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

import { increment, decrement } from '../store/actions/CounterActions';  // <===== import your actions here, preferably like this


/** add the following: */

const mapStateToProps = (state, ownProps) => ({
    // ... computed data from state and optionally ownProps
});

const mapDispatchToProps = {
    // ... normally is an object full of action creators
    increment,    // <===== Map your dispatch here to props
    decrement     // <===== Mapping the second dispatch
};

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

/** Export your component like this */ 

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(HomeScreen)

现在，您可以在 HomeScreen.js 的任何地方致电 this.props.increment(yourNumber) 或 this.props.decrement(yourNumber)，一切顺利

希望对您有所帮助！