2017-12-11 3 views
0

Ich stehe dieses Problem beim Authentifizieren mit redux-token-auth Npm-Paket für Schienen-Backend vorgeschlagen. Ich habe die Schritte des npm-Pakets zur Integration von device_token_auth ausgeführt. Siehe here Im Folgenden finden Sie die StackTrace und unterstützende Dateien.ReduxTokenAuthConfig ist keine Funktion

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-Token-Auth-Config

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

Antwort

0

Die signInUser-Funktion wird an mapDispatchToProps übergeben und wurde nicht über Requisiten in der submitForm-Funktion aufgerufen.

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