Начал делать авторизацию в своем приложении с помощью Redux и столкнулся с проблемой, которую никак не получается решить.
loginForm.js
import React from 'react'
export class LoginForm extends React.Component {
constructor(props){
super(props);
this.state = {
data: {
login: "",
password: ""
}
}
}
onSubmit = e => {
e.preventDefault()
this.props.submit(this.state.data)
}
onChange = e => {
this.setState({data: {...this.state.data, [e.target.name]: e.target.value}})
}
render() {
return (
<div className="wrapper">
<div className="reg-form">
<h1>Welcome to MyMusic</h1>
<form onSubmit = {this.onSubmit}>
<div className = "formline1">
<span>
<i className="fa fa-user" aria-hidden="true"></i>
</span>
<input type="text" className = "login" onChange = {this.onChange}
name = "login" placeholder="Login"/>
</div>
<div className = "formline2">
<span>
<i className="fa fa-lock" aria-hidden="true"></i>
</span>
<input type="password" className = "password" onChange = {this.onChange}
name = "password" placeholder="Password"/>
</div>
<input type="submit" className = "button" name="log in" value="Log in"/>
</form>
</div>
</div>
)
}
}
loginpage.js
import React from 'react'
import PropTypes from 'prop-types'
import { LoginForm } from './loginForm.js'
import { login } from "../actions/auth.js"
import { connect } from 'react-redux'
export class LoginPage extends React.Component {
submit = data =>
this.props.login(data).then(() => this.props.history.push('/music'));
render() {
return (
<LoginForm submit = {this.submit} />
)
}
}
export default connect(null, {login})(LoginPage);
auth.js
import { USER_LOGGED_IN } from "../types/types.js"
import api from '../api/api.js'
export const userLoggedIn = user => ({
type: USER_LOGGED_IN,
user
});
export const login = credentials => dispatch =>
api.user.login(credentials).then(user => dispatch(userLoggedIn(user)));
index.js
import React from "react"
import ReactDOM, {render} from "react-dom"
import { BrowserRouter} from 'react-router-dom'
import { createStore, applyMiddleware} from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import rootReducer from './rootReducer.js'
import { composeWithDevTools} from 'redux-devtools-extension'
import { Menu } from "./components/menu.js"
import { Main } from './components/main.js'
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))
class App extends React.Component {
render() {
return <div>
<Menu />
<Main />
</div>
}
}
render(
<Provider store = {store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
window.document.getElementById('root'));
api.js
import axios from 'axios'
export default {
user: {
login: credentials => axios.post('api/auth', { credentials }).then(res => res.data.user)
}
};
При сабмите в форме в появляется ошибка this.props.login is not a function, не могу понять в чем причина.
Средний