Я работаю над приложением реагирования / редукса с сервером Nodejs и базой данных Mon go. У меня есть действующий код входа в систему для моей стороны реакции / избыточности, который успешно проходит на сервер и входит в систему пользователя. Это только кажется слишком длинным и нуждается в рефакторинге, чтобы сконденсировать это. Я понимаю, что существует миллион способов реорганизовать шаблон, но я был бы признателен, если бы кто-нибудь мог указать мне на области, чтобы сделать мой код loginAction и код loginReducer более элегантным.
Ниже перечислены страницы входа в систему. js, использующие компонент формы-редукции, файлы loginActions. js, actionTypes. js и loginReducer. js. Вход в систему работает корректно и касается базы данных с помощью комбинации адрес электронной почты / пароль, что приводит к возвращению данных authUser.
Login. js
import React, { Component } from "react";
import { connect } from "react-redux";
import "./Register.scss";
import LoginForm from "../../components/Forms/AuthForms/LoginForm";
import * as actions from "../../store/actions/authActions/loginActions";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
class Login extends Component {
state = {
email: "",
password: "",
};
handleChange = (event) => {
this.setState({
email: event.email,
password: event.password,
});
};
handleSubmit = (event) => {
event.preventDefault();
let user = {
email: this.state.email,
password: this.state.password,
};
console.log("submit", user);
this.props.onLogin(user);
console.log("click");
};
render() {
console.log();
return (
<Container className="form">
<Row className="form-row">
<h3>Login</h3>
<LoginForm
onChange={this.handleChange}
onSubmit={this.handleSubmit}
user={this.user}
/>
</Row>
</Container>
);
}
}
const mapStateToProps = (state) => {
console.log(state);
return {
loading: state.login.loading,
authUser: state.login.authUser,
token: state.login.token,
isAuth: state.login.isAuth,
};
};
const mapDispatchToProps = (dispatch) => {
return {
onLogin: (user) => dispatch(actions.loginUser(user)),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Login);
loginActions. js
import * as actionTypes from "../types";
import axios from "axios";
export const loginStart = () => {
return {
type: actionTypes.LOGIN_START,
};
};
export const loginSuccess = (token, authUser) => {
return {
type: actionTypes.LOGIN_SUCCESS,
token,
authUser,
};
};
export const loginFail = (error) => {
return {
type: actionTypes.LOGIN_FAIL,
error: error,
};
};
export const logout = () => {
localStorage.removeItem("token");
localStorage.removeItem("authUser");
return {
type: actionTypes.LOGOUT,
};
};
export const loginUser = (user) => {
return (dispatch) => {
dispatch(loginStart());
axios
.post("http://localhost:3100/auth/login", user)
.then((response) => {
/* This is an artifact of the way the authController returns the MongoDB doc.
Needs fixing in authController. Also, need to remove password from return MongoDB doc
for authUser.
*/
let authUser = response.data.user._doc;
localStorage.setItem("token", response.data.token);
localStorage.setItem("authUser", JSON.stringify(authUser));
dispatch(loginSuccess(response.data.token, authUser));
})
.catch((error) => {
dispatch(loginFail(error));
});
};
};
export const setLoginRedirect = (path) => {
return {
type: actionTypes.SET_LOGIN_REDIRECT,
path,
};
};
loginReducer. js
import * as actionTypes from "../../actions/types";
import { updateObject } from "../../../shared/utility";
/* upDateObject export code
export const updateObject = (oldObject, newValues) => {
return {
...oldObject,
...newValues
};
};
*/
const initialState = {
token: localStorage.getItem("token") || null,
authUser: JSON.parse(localStorage.getItem("authUser")) || {},
isAuth: false,
error: null,
loading: false,
loginRedirectPath: "/dashboard",
};
const loginStart = (state, action) => {
return updateObject(state, {
error: null,
loading: true,
});
};
const loginSuccess = (state, action) => {
return updateObject(state, {
token: action.token,
authUser: action.authUser,
error: null,
loading: false,
isAuth: true,
});
};
const loginFail = (state, action) => {
return updateObject(state, {
error: action.error,
loading: false,
});
};
const logout = (state, action) => {
return updateObject(state, {
token: null,
authData: null,
isAuth: false,
});
};
const setLoginRedirect = (state, action) => {
return updateObject(state, { loginRedirectPath: action.path });
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.LOGIN_START:
return loginStart(state, action)
case actionTypes.LOGIN_SUCCESS:
return loginSuccess(state, action)
case actionTypes.LOGIN_FAIL:
return loginFail(state, action)
case actionTypes.LOGOUT:
return logout(state, action)
case actionTypes.SET_LOGIN_REDIRECT:
return setLoginRedirect(state, action)
default: return state
};
};
export default reducer;
Поэтому, если у кого-нибудь есть указания относительно того, где я могу сократить свой код, я был бы признателен. Спасибо.