Getting error when calling an action from container in react-redux

Question

I am integrating redux with my react-native app. I have moved my state and action management to Container and integrated the container with component using 'connect'.

App.js

const AppNavigator = createSwitchNavigator({
    SplashScreen: SplashScreen,
    render() {
        return(
            <Provider store={store}>
            <AppNavigator/>
            </Provider>
        )
    }
});

const store = createStore(reducer);

export default createAppContainer(AppNavigator);

SignIn.js

import React from "react";
import {View} from "react-native";
import authenticateUser from "../../../services/api/authenticateUser";

const SignIn = (props) => {

    const authenticate = async () => {
        try {
            return await authenticateUser.get('/abc', {
                params: {
                    code,
                }
            });
        }
        catch (e) {
        }
    }

    const validateUserCredentials = (isValid) => {

            authenticate().then(response => {
                const responseData = response.data;
                props.updateEventRules(responseData);
            });
        }
    }


    return (
        <View></View>
    );

export default SignIn;

Sign-InContainer.js

import {eventRulesUpdated} from '../../../actions/actions';
import {connect} from 'react-redux';
import SignIn from './signin-screen';

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => {
    return {
        updateEventRules: rules => {
            dispatch(eventRulesUpdated(rules))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);

When running the app I am getting an error that - props.updateEventRules() is not a function.

Can anyone please help me what am I doing wrong?

Answer 1

You should have the connect functions inside Signin.js like this

import React from "react";
import {View} from "react-native";
import authenticateUser from "../../../services/api/authenticateUser";

const SignIn = (props) => {

    const authenticate = async () => {
        try {
            return await authenticateUser.get('/abc', {
                params: {
                    code,
                }
            });
        }
        catch (e) {
        }
     }

     const validateUserCredentials = (isValid) => {

        authenticate().then(response => {
            const responseData = response.data;
            props.updateEventRules(responseData);
        });
    }
}

return (
    <View></View>
);

const mapStateToProps = (state) => ({});

const mapDispatchToProps = dispatch => {
    return {
        updateEventRules: rules => {
            dispatch(eventRulesUpdated(rules))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(SignIn);