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);

Answer 2

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

由于您仅发布了相关的部分，因此首先请修改您的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)，您应该可以参加

希望这会有所帮助！

Answer 3

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

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;

无法使用mapDispatchToProps连接组件

3 个答案: