React-Native Redux connect syntaxError - react-native

Question

I'm learning Redux. I don't konw why syntax error appear.
I'm building a simple counter app.
This is my code. I don't well react-native and redux. so I really need help.Plase help me.
I don't know where I'm wrong. I think problem is View.js.
App.js
`import React from 'react';
import Screen from './src/View';
import { Provider,createStore } from 'react-redux';
const store = createStore(reducers);
const App=()=>{
return(
<Provider store={store}>
<Screen/>
</Provider>
)
}
export default App;`
View.Js
This part have syntax error.
import React from "react";
import { StyleSheet,View, Text, Button } from "react-native";
import { connect } from 'react-redux';
export default function Screen (){
return(
<View >
<Text style={styles.containers}>counter: </Text>
<Text style={styles.containers}>{this.props.state.counterNum}</Text>
<Button title="+" >+</Button>
<Button title="-" >-</Button>
</View>
);
};
const styles=StyleSheet.create({
containers : {
textAlign:"center",
}
}
);
function mapStateToProps(state){
return {
state: state.counterNum
};
}
// Actions을 props로 변환
function matchDispatchToProps(dispatch){
return bindActionCreators({
counter : counterNum
}, dispatch);
}
//(error here)
export default connect(mapStateToProps, matchDispatchToProps)(Screen)
index.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
const initialState={
counter:[
{
counterNum:0,
},
],
};
const counter=( state= initialState, action)=>{
const {counter}=state;
switch(action.type){
case 'INCREMENT':
return({
counter:[
...counter.slice(0,action.index),
{
counterNun : counter[action.index].counterNum +1,
}
]
});
case 'DECREMENT' :
return({
counter:[
...counter.slice(0,action.index),
{
counterNun : counter[action.index].counterNum -1,
}
]
});
default :
return state;
}
}
export default counter;
Any help/knowledge will be appreciated thanks!

Answer 1

It looks like you are trying to use syntax for class components.
Try passing props into Screen like this:
export default function Screen (props){
return(
<View >
<Text style={styles.containers}>counter: </Text>
<Text style={styles.containers}>{props.state}</Text>
<Button title="+" >+</Button>
<Button title="-" >-</Button>
</View>
);
};
no need for this keyword
Also, would be better to do this:
function mapStateToProps(state){
return {
counterNum: state.counterNum // <-- change property name to counterNum
};
}
then you can access this value with props.counterNum