0

Немножко не понятно, как в моем случае применять 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>

2
  • вы имеете в виде, что вы хотите сабмит формы организовать в виден редакс экшна? 24 янв 2018 в 18:49
  • @DanielKhoroshko да 25 янв 2018 в 6:21

1 ответ 1

-1

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import  { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { Route, Switch, Redirect } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import thunk from 'redux-thunk';
import Helmet from './aplication';
import loginReducers from './reducer/loginDucks';
import Home from "./Home";
import Auth from "./AuthForm";

const rootReducer = combineReducers({
    login: loginReducers,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

console.log(sessionStorage.getItem('auth'));

ReactDOM.render(
        <div>
        <Helmet title='Авторизация'/>
        <Provider store={store}>
            <BrowserRouter>
                <Switch>
                    <Route path='/' component={Auth}/>
                    <Route path='/index' render={() => sessionStorage.getItem('auth') !== null ? (<Redirect to='/'/>) : (<Home />)}/>
                </Switch>
            </BrowserRouter>
        </Provider>
        </div>,
    document.getElementById('content')
);

loginDucks.js

import axios from 'axios';

const LOGIN_REQUEST = 'LOGIN_REQUEST',
    LOGIN_SUCCESS = 'LOGIN_SUCCESS',
    LOGIN_ERROR = 'LOGIN_ERROR';

const loginSuccess = data => ({
    type: LOGIN_SUCCESS,
    payload: {id: data.id, login: data.login, name: data.name}
});

const loginError = data => ({
    type: LOGIN_ERROR,
    payload: data
});

export const login = form => async dispatch => {
    try {
        const res = await axios.post('/api/user', form);

        if (!res.data || res.data === false) {
            dispatch(loginError('Неправильный логин или пароль'));
        } else {
            dispatch(loginSuccess(res.data));
        }
    } catch (e) {
        dispatch(loginError(e.response.data));
    }
};

const initialState = {
    isLoading: false,
    isError: false,
    shouldRedirect: false,
    errorMessage: '',
    user: false,
};

export default (state = initialState, action) => {
    const { type, payload } = action;

    switch(type){
        case LOGIN_REQUEST:
            return {
                ...state,
                isLoading: true,
                isError: false
            };
        case LOGIN_SUCCESS:
            sessionStorage.setItem('auth', JSON.stringify(payload));
            return {
                ...state,
                user: payload,
                isLoading: false,
                shouldRedirect: true
            };
        case LOGIN_ERROR:
            return {
                ...state,
                errorMessage: payload,
                isLoading: false,
                isError: true,
            };
        default:
            return state;
    }
}

AuthForm

import React, { Component } from 'react';
import { Redirect } from 'react-router';
import { connect }from 'react-redux';
import { login } from './reducer/loginDucks';

class UserForm extends Component{
      ...
    handleSubmit = e => {
        e.preventDefault();
        this.props.login(this.state.form);
    };

    ...
    render(){
        const { form } = this.state;
        const { isLoading, isError, shouldRedirect, errorMessage } = this.props;
        if (shouldRedirect) return <Redirect to='/index'/>;
        return(
            ...
        );
    }
}

const mapStateToProps = state => ({
    isLoading: state.login.isLoading,
    isError: state.login.isError,
    shouldRedirect: state.login.shouldRedirect,
    errorMessage: state.login.errorMessage,
});

const mapDispatchToProps = {
    login,
};

export default connect(mapStateToProps, mapDispatchToProps)(UserForm)
<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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.