Блог

Я работаю над проектом, в котором четыре разных пользователя входят в систему и регистрируются, а также их панель мониторинга. Я создал часть входа для всех пользователей, поскольку это единый API, я использовал switch case для перенаправления пользователя на панель мониторинга в зависимости от типа пользователя. Я переопределяю и axios в этом процессе

Теперь мне нужно создать для них часть регистрации. Для регистрации у каждого пользователя разные API. Я создал часть регистрации и хранилище redux для одного пользователя. Итак, для оставшегося пользователя, сделайте, мне нужно создать другое хранилище или я могу сделать это в том же самом хранилище.

Ниже приведен мой код формы регистрации

Примечание: форма, которую я использовал ниже, приведена только для примера. В моем оригинале из много полей.

Заранее спасибо

 /***Form One***/
import React, { Component } from 'react';
import {
 TextField } from '@material-ui/core';


class FormOne extends Component {

constructor(props){
super(props);
this.state = {
email: "",
password: "",
confirmPassword: ""
};
}
buttonClick = event => {
            event.preventDefault();
            console.log(this.state);
             this.setState({
                 submitted: true
             })
             const {email, password} = this.state;

             const { dispatch } = this.props;
             if(email amp;amp; password) {
                dispatch(registerUser(email, password))
             }
        }
render(){

return(
<div>
<TextField
                                id="standard-email-input"
                                label="Email"
                                className="form-field"
                                type="email"
                                name="email"
                                autoComplete="email"
                                onChange={this.props.email}
                            />
                            <TextField
                                id="standard-password-input"
                                label="Password"
                                className="form-field"
                                type="password"
                                name="password"
                                onChange={this.props.password}
                            />

                            <TextField
                                id="standard-confirm-input"
                                label="Confirm Password"
                                className="form-field"
                                type="password"
                                onChange={this.props.confirmPassword}
                                name="confirmPassword"
                            />
<Button variant="contained" className={classes.submitButton} onClick={this.buttonClick}>
                        Register Now
                    </Button>
</div>
)}
}

export default FormOne;

/***Form Two***/

import React, { Component } from 'react';
import {
 TextField } from '@material-ui/core';


class FormTwo extends Component {
constructor(props){
super(props);
this.state = {
email: "",
password: "",
confirmPassword: ""
};
}
buttonClick = event => {
            event.preventDefault();
            console.log(this.state);
             this.setState({
                 submitted: true
             })
             const {email, password} = this.state;

             const { dispatch } = this.props;
             if(email amp;amp; password) {
                dispatch(registerUser(email, password))
             }
        }
render(){

return(
<div>

<TextField
                                id="standard-email-input"
                                label="Email"
                                className="form-field"
                                type="email"
                                name="email"
                                autoComplete="email"
                                onChange={this.props.email}
                            />
                            <TextField
                                id="standard-password-input"
                                label="Password"
                                className="form-field"
                                type="password"
                                name="password"
                                onChange={this.props.password}
                            />

                            <TextField
                                id="standard-confirm-input"
                                label="Confirm Password"
                                className="form-field"
                                type="password"
                                onChange={this.props.confirmPassword}
                                name="confirmPassword"
                            />
<Button variant="contained" className={classes.submitButton} onClick={this.buttonClick}>
                        Register Now
                    </Button>
</div>
)}
}

export default FormTwo;

/***action.js***/

import axios from "axios";
import { REGISTERATION_REQUEST, REGISTERATION_COMPLETED, REGISTERATION_ERROR } from "./types";
import qs from "qs";
import history from '../../history/history.js';

const startRegister = () => {
    return {
      type: REGISTERATION_REQUEST
    };
  };

  const registerComplete = data => ({
    type: REGISTERATION_COMPLETED,
    data
  });

  const registerError = err => ({
    type: REGISTERATION_ERROR,
    err
  });


  export const registerUser = (email, password) => {
    return dispatch => {
      dispatch(startRegister());

      let headers = {
        "Content-Type": "application/x-www-form-urlencoded"
      };

      const data = qs.stringify({
        email, password
      });

      axios
      .post("api-link/registerUserOne", data, {
        headers: headers
      })
      .then(function (resp) {

        dispatch(registerComplete());
        window.location.reload();
        history.push('/login');
        //dispatch(registerComplete(resp.data));

      })
      .catch(err => dispatch(registerError(err)));
    }


  };

/**reducer.js***/
import { REGISTERATION_REQUEST, REGISTERATION_COMPLETED, REGISTERATION_ERROR } from "./types";
import initialState from "./initialState";

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case REGISTERATION_REQUEST:
      return {
        ...state,
        loading: true,
        token: null,
        userName: ""
      };

    case REGISTERATION_COMPLETED:
      return {
        ...state,
        token: action.data.access_token,
        userName: action.data.userName,
        userType: action.data.userType
      };

    case REGISTERATION_ERROR:
      return {
        ...state,
        loading: false,
        error: true,
        people: []
      };

    default:
      return state;
  }
};

export default reducer;

/***initialState.js***/
const initialState = {
    loading: false,
    token: null,
    userName: "",
    userType: null
  };

  export default initialState;


/***Type.js***/
const REGISTERATION_REQUEST = "REGISTERATION_REQUEST";
const REGISTERATION_COMPLETED = "REGISTERATION_COMPLETED";
const REGISTERATION_ERROR = "REGISTERATION_ERROR";

export { REGISTERATION_REQUEST, REGISTERATION_COMPLETED, REGISTERATION_ERROR };

/***index.js(reducer)***/
import reducer from "./reducer";
export default reducer;