React-Native Redux connect syntaxError-CodePudding

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!

CodePudding user response：

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