Не удается соединить компоненты с mapDispatchToProps

Question

У меня есть проект React Native с Redux, и я пытаюсь связать действия с компонентами. У меня есть файл 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

Следуйте, мы внесем некоторые изменения в ваши файлы:

Сначала давайте изменим ваш 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 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

mapDispatchToProps - это второй аргумент функции connect из react-redux.

Я также думаю, что вы неправильно передали первый аргумент connect.

Попробуйте это:

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