Connect() not working ( no error ) in Redux React Native app - react-native

Question

I'm trying to create a small counting number app, all it does is when I click increase, the counter value increase.
And I'm trying to apply Redux to it, but it not working.
Because there is no error thrown, I really don't know where to fix. Please help.
Thank you in advance!
I checked the store.getState() and the appReducer , it worked just fine. I think the problem is that I did something wrong and the connect() didn't work probably.
/* STORE */
import { createStore } from 'redux';
const INCREASE = 'increase';
const DECREASE = 'decrease';
const increase = () => { type: INCREASE }
const decrease = () => { type: DECREASE }
const initialState = { count: 0 };
function appReducer(state = initialState, action) {
switch (action.type) {
case INCREASE:
return { count: state.count + 1 };
case DECREASE:
return { count: state.count - 1 };
}
return state;
}
const store = createStore(appReducer);
/* COMPONENT */
export class Main extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{ flex: 1 }}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#4a99f9',
}}>
<Text
style={{
color: 'white',
fontSize: 100,
fontWeight: 'bold',
textAlign: 'center',
}}>
{ this.props.count }
</Text>
</View>
<View
style={{
flex: 1,
padding: 30,
alignItems: 'center',
backgroundColor: '#fff711',
}}>
<TouchableOpacity
style={{
margin: 5,
width: 200,
height: 50,
backgroundColor: '#51f772',
justifyContent: 'center',
}}
onPress={increase}>
<Text
style={{
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
}}>
Increase
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
margin: 5,
width: 200,
height: 50,
backgroundColor: '#ff5c38',
justifyContent: 'center',
}}
onPress={decrease}>
<Text
style={{
color: 'white',
textAlign: 'center',
fontWeight: 'bold',
}}>
Decrease
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
/* ROOT */
import { connect } from 'react-redux';
const mapStateToProps = state => { count: state.count };
const mapDispatchToProps = dispatch => {
return {
increase: () => dispatch(increase()) ,
decrease: () => dispatch(decrease())
}
};
const AppContainer = connect(mapStateToProps , mapDispatchToProps)(Main);
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Provider } from 'react-redux';
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}

Answer 1

Hi change your component file to below code and rerun. You forgot to dispatch your actions.
import React, { Component } from "react";
import {
View,
Text,
StyleSheet,
TouchableOpacity
} from "react-native";
import { connect } from 'react-redux'
class CounterApp extends Component {
render() {
return (
<View style={styles.container}>
<View style={{ flexDirection: 'row', width: 200, justifyContent: 'space-around' }}>
<TouchableOpacity onPress={() => this.props.increaseCounter()}>
<Text style={{ fontSize: 20 }}>Increase</Text>
</TouchableOpacity>
<Text style={{ fontSize: 20 }}>{this.props.counter}</Text>
<TouchableOpacity onPress={() => this.props.decreaseCounter()}>
<Text style={{ fontSize: 20 }}>Decrease</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
function mapStateToProps(state) {
return {
counter: state.counter
}
}
function mapDispatchToProps(dispatch) {
return {
increaseCounter: () => dispatch({ type: 'INCREASE' }),
decreaseCounter: () => dispatch({ type: 'DECREASE' }),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CounterApp)
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
});