Can't connect components with mapDispatchToProps - react-native

Question

I have React Native project with Redux and I'm trying to connect the actions to the components.
I have App.js file without index.js file.
This is how I implement 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: (Only the relevant part)
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 })
}
};
The following line in MainTabNavigator.js connects the state to props of the HomeScreen component:
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 components gets the state correctly and render 'count', but How do I connect the actions?
I want HomeScreen to dispatch like this:
props.increment(1);
Thanks!

Answer 1

The mapDispatchToProps is the second argument of the connect function from the react-redux.
I also think that you pass wrong the first argument to the connect.
Try this:
let HomePage = connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

Answer 2

Finally solved it by the following way:
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

Follow along, we will make some modifications to your files:
First lets modify your MainTabNavigator.js since you only posted the relevant part, make sure to implement this for the rest as well.
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;
What we want is to have the mapping of state and props on the Home Screen itself (or any other screen)
Now lets move on to your 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)
Now anywhere on your HomeScreen.js you can call this.props.increment(yourNumber) or this.props.decrement(yourNumber) and you should be good to go
Hope this Helps!