Question

我在尝试使用为rails后端建议的redux-token-auth npm包进行身份验证时遇到此问题。我按照npm包给出的步骤来集成device_token_auth。参考here 下面是stackTrace和支持文件。

SignIn.js?9aee:29 Uncaught TypeError: (0 , _reduxTokenAuthConfig2.default) is not a function
    at Login._this.onSubmit (SignIn.js?9aee:29)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:581)
    at Object.invokeGuardedCallback (react-dom.development.js?cada:438)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?cada:452)
    at executeDispatch (react-dom.development.js?cada:836)
    at executeDispatchesInOrder (react-dom.development.js?cada:858)
    at executeDispatchesAndRelease (react-dom.development.js?cada:956)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js?cada:967)
    at Array.forEach (<anonymous>

SignInComponent

import React from 'react';
import { connect } from 'react-redux';
import { signInUser } from '../actions/redux-token-auth-config';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: ''
        }
    }

    onEmailChange = (e) => {
        const email = e.target.value;
        this.setState(() => ({ email }))
    }

    onPasswordChange = (e) => {
        const password = e.target.value;
        this.setState(() => ({ password }))
    }

    onSubmit = (e) => {
        if (this.state.email && this.state.password) {
            const { email, password } = this.state
            signInUser({ email, password }).then((response) => {
                alert(response);
            }).catch((error) => {
                alert(error)
            })
        }
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <input
                        type="text" placeholder="Email" autoFocus autoComplete="On"
                        value={this.state.email}
                        onChange={this.onEmailChange}
                    />
                    <input type="password" placeholder="Password" autoComplete="current-password"
                        value={this.state.password}
                        onChange={this.onPasswordChange}
                    />
                    <button>Login</button>
                </form>
            </div >
        )
    }
}
export default connect(null, { signInUser })(Login);

Redux的令牌认证 - 配置

import { generateAuthActions } from 'redux-token-auth'

const config = {
    authUrl: "http://localhost:3000/user_auth",
    userAttributes: {
        firstName: 'first_name',
        lastName: 'last_name',
        contactNumber: 'contact_number',
        ProfilePhotoUrl: 'profile_photo_url'
    },
    userRegistrationAttributes: {
        firstName: 'first_name',
        lastName: 'last_name'
    }
}

const {
    registerUser,
    signInUser,
    signOutUser,
    verifyCredentials,
} = generateAuthActions(config)

export {
    registerUser,
    signInUser,
    signOutUser,
    verifyCredentials
}

StoreConfig

import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import expensesReducer from '../reducers/expenses';
import filterReducers from '../reducers/filters';
import { reduxTokenAuthReducer } from 'redux-token-auth'
import thunk from 'redux-thunk';

export default () => {
    const store = createStore(
        combineReducers({
            reduxTokenAuth: reduxTokenAuthReducer,
            expenses: expensesReducer,
            filters: filterReducers
        }),
        compose(
            applyMiddleware(thunk)
        )
    )
    return store;
}

Answer 1

signInUser函数传递给mapDispatchToProps，并且尚未通过submitForm函数中的props访问。

submitForm=(e) => {
        e.preventDefault();
        const {
            email,
            password,
        } = this.state;
        this.props.signInUser({ email, password })
            .then((response) => {
                console.log(response);
            }).catch((error) => {
                console.log(error);
            });
    }

ReduxTokenAuthConfig不是一个函数

1 个答案: