connect function of redux - reactjs

Question

i want to start with redux and the connect function. When i use the useSelector hook, everything is fine, so my redux-state works. But with connect and the maptStateToProps function not. The number variable is undefined.
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { connect } from 'react-redux'
import { incrementNumber } from '../actions/exampleAction'
const Incrementor = ({ number, increment }) => {
return (
<View>
<Text onPress={increment}>{number}</Text>
</View>
)
}
export default connect(mapStateToProps, mapDispatchToProps)(Incrementor)
const styles = StyleSheet.create({})
const mapStateToProps = (state) => {
return {
number: state.exampleReducer.number,
}
};
const mapDispatchToProps = (dispatch) => {
return {
increment: () => dispatch(incrementNumber()),
}
};
Here is the working solution with react Hooks:
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useSelector , useDispatch} from 'react-redux'
import { connect } from 'react-redux'
import { incrementNumber } from '../actions/exampleAction'
const Incrementor = () => {
const dispatch = useDispatch();
const number = useSelector(state => state.exampleReducer.number)
return (
<View>
<Text onPress={() => {dispatch({type: "INCREMENT"})}}>{number}</Text>
</View>
)
}
const styles = StyleSheet.create({})
export default Incrementor
Here is my reducer function:
import { INCREMENT } from "../actions/exampleAction";
let initialState = { number: 0 };
export default function reducer (state = initialState, action) {
switch (action.type) {
case INCREMENT:
return { ...state, number: state.number+1, };
default:
return state;
}
}
And here the action:
export const INCREMENT = "INCREMENT";
export const incrementNumber = () => {
return {
type: INCREMENT,
}
};
Here i combine my reducers:
import { combineReducers } from 'redux'
import exampleReducer from "./exampleReducer"
const reducers = combineReducers({
exampleReducer,
});
export default reducers;
And here is my App.js
import React from 'react';
import { StyleSheet, View } from 'react-native'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux';
import Incrementor from './src/components/Incrementor';
import reducer from "./src/reducers/index"
let store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
export default function App() {
return (
<Provider store={store}>
<View style={styles.container}>
<Incrementor />
</View>
</Provider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

first of all, check you've imported incrementNumber() from actions, after that you have to use connect function after defining all mapStateToProps & mapDispatchToProps, your code will be like this
const mapStateToProps = (state) => ({
number: state
})
const mapDispatchToProps = (dispatch) => ({
increment: () => dispatch(incrementNumber())
})
export default connect(mapStateToProps, mapDispatchToProps)(Incrementor)