Как сделать почтовый запрос, используя реагирующий редукс? - PullRequest
Новая
       16

Как сделать почтовый запрос, используя реагирующий редукс?

0 голосов
/ 01 ноября 2018

Я создал форму с адресом электронной почты, именем, фамилией. Теперь я хочу сделать POST-запрос к localhost:5000/api/users и сохранить его в базе данных mongo. Как я могу использовать излишки? Я реализовал это с использованием только responsejs, как я могу использовать избыточность? Примечание: я использую Redux Thunk.

Код:

login.js: 

import React, { Component } from 'react'
import './login.css'

export default class Login extends Component {

  constructor(props) {
    super(props)
    this.state = {
      firstName:'',
      lastName:'',
      email:''
    }

    this.onChangeHandler = this.onChangeHandler.bind(this)
    this.onSubmitHandler = this.onSubmitHandler.bind(this)
  }

  onChangeHandler(e){
    this.setState({ [e.target.name]: e.target.value })
  }

  onSubmitHandler(e){
    e.preventDefault();
    console.log(this.state)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmitHandler}>
          <label>
            FirstName:
            <input type="text" name="firstName" value={this.state.firstName} onChange={this.onChangeHandler} />
          </label>

          <label>
            LastName:
            <input type="text" name="lastName" value={this.state.lastName} onChange={this.onChangeHandler} />
          </label>

          <label>
            Email:
            <input type="text" name="email" value={this.state.email} onChange={this.onChangeHandler} />
          </label>
          <button type="submit" className="btn btn-default">Submit</button>
        </form>
      </div>
    )
  }
}

loginAction.js: 

import { ADD_USER } from './types';
import axios from 'axios';

export const userLoginRequest = () => dispatch => {
    axios.post(`localhost:5000/api/users`)
    .then( userdata => 
        dispatch({
            type: ADD_USER,
            payload: userdata
        })
    )
    .catch( error => {
        console.log(error);
    });
};

loginReducer.js: 

import { ADD_USER } from '../actions/types';

const initialState = {
    firstName: '',
    lastName: '',
    email: ''
}


export default function (state = initialState, action) {
    switch (action.type) {
        case ADD_USER:
            return {
                ...state,
                items: action.payload
            };
        default:
            return state;
    }
}

Я не могу понять, нужно ли мне создавать 3 действия для имени, фамилии и электронной почты? В таком случае, какие будут эти 3 действия, будет ли в каждом из них по 3 запроса POST?

1 Ответ

0 голосов
/ 01 ноября 2018

Я рекомендую вам ознакомиться с redux и redux-thunk. Для отправки сетевых запросов вам необходимо использовать промежуточное ПО, например redux-thunk или redux-saga;

Вот очень простые примеры redux-thunk

//example 1
function myThunkActionCreator(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});

        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(
                response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),
                error => dispatch({type : "REQUEST_FAILED", error : error})
            );    
    };
}

// example 2 for conditional dispatching based on state
const MAX_TODOS = 5;

function addTodosIfAllowed(todoText) {
    return (dispatch, getState) => {
        const state = getState();

        if(state.todos.length < MAX_TODOS) {
            dispatch({type : "ADD_TODO", text : todoText});
        }    
    }
}

Обновление

Таким образом, процесс отправки данных формы на сервер с использованием redux-thunk выглядит следующим образом

  1. Когда нажата кнопка отправки и отправлено действие, давайте предположим, что SAVE_USER_TO_SERVER и объект со всеми пользовательскими данными (имя, адрес электронной почты и т. Д.) Передается, например, для postUserThunkCreator() (это функция thunk, подобная в приведенных выше примерах).

  2. Затем thunk отправляет запрос на сервер и отправляет данные вместе с ним. А на стороне сервера он сохраняется в базе данных и возвращается

  3. Теперь myAjaxLib.post("/someEndpoint", {data : someValue}).then() в функции .then() вы можете проверить ответ, если успешно выполнить другое действие, например, SAVE_USER_TO_SERVER_SUCCESS в противном случае SAVE_USER_TO_SERVER_FALIURE;

* Итак, как мы можем видеть, три действия связаны в этом рабочем процессе, а именно: SAVE_USER_TO_SERVER

SAVE_USER_TO_SERVER_SUCCESS

SAVE_USER_TO_SERVER_FALIURE

Так что я надеюсь, вам ясно, что вы создадите три действия, упомянутых выше.

Ваш вопрос Нужно ли создавать 3 действия для имени, фамилии и адреса электронной почты?

Ответ: Совсем нет. Только три действия, упомянутые выше.

...