Немножко не понятно, как в моем случае применять redux при отправке формы. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Auth from './component/AuthForm';
import Helmet from './aplication';
function user(state = {}, action){
if(action.type === 'ADD_USER'){
return [
...state,
action.user
];
}
return state;
}
const store = createStore(user, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
ReactDOM.render(
<div>
<Helmet title='Авторизация'/>
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route exact path='/' component={Auth}/>
<Route path='/index' render={() => <div>Index</div>}/>
</Switch>
</BrowserRouter>
</Provider>
</div>,
document.getElementById('content')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
И форма
import React, { Component } from 'react';
import { Redirect } from 'react-router';
import axios from 'axios';
import TextField from 'material-ui/TextField';
import RaiseButtin from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
export default class UserForm extends Component{
state = {
form: {
login: "",
password: ""
},
error: "",
redirectTo: "",
};
handleSubmit = e => {
e.preventDefault();
//По логике тут я должен его вынести, верно dispather?
axios.post('/api/user', this.state.form)
.then(response => {
if (response.data === false){
this.setState({ error: 'Неверный логин или пароль'});
} else {
this.setState({redirectTo: '/index'});
}
})
.catch(err => console.log(err));
};
handleChange = e => {
const { name, value } = e.target;
this.setState( prevState => ({
form: {
...prevState.form,
[name]: value,
}
}));
};
render(){
const { form, error, redirectTo } = this.state;
if(redirectTo) return <Redirect to={redirectTo}/>;
return(
<div className='authForm'>
<h1>Авторизация</h1>
<div className='error'>{error}</div>
<form onSubmit={this.handleSubmit}>
<MuiThemeProvider>
<TextField
hintText="Введите логин"
name="login"
fullWidth={true}
value={form.login}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<TextField
hintText="Введите пароль"
type="password"
name="password"
fullWidth={true}
value={form.password}
required={true}
onChange={this.handleChange}
/>
</MuiThemeProvider>
<MuiThemeProvider>
<RaiseButtin label="Войти" fullWidth={true} className="authForm-button"> <input type="submit" className="authForm-input" /> </RaiseButtin>
</MuiThemeProvider>
</form>
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>