从react-redux中的容器调用操作时出现错误

时间:2020-07-20 15:47:34

标签: javascript reactjs react-native redux

我正在将redux与我的react-native应用程序集成。我已经将状态和动作管理移至Container,并使用“连接”将容器与组件集成。

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);

运行该应用程序时,出现错误-props.updateEventRules()不是函数。

有人可以帮我做错什么吗?

1 个答案:

答案 0 :(得分:0)

您应该像这样在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>
);

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

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

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