如何使用 react redux 发出帖子请求？

IT技术 reactjs redux axios redux-thunk
2021-05-03 01:27:25

我创建了一个包含电子邮件、名字、姓氏详细信息的表单。现在我想向 POST 请求localhost:5000/api/users并将其存储在 mongo 数据库中。如何使用 redux ？我只在 reactjs 上使用了它，我该如何使用 redux ？注意：我使用的是 redux thunk。

代码：

登录.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>
    )
  }
}

登录Action.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个回答

我建议你有关于一些见解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 向服务器发出一个 post 请求并随它发送数据。在服务器端，它被保存到数据库中并返回响应

  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 个操作？

回答：完全没有。上面只提到了三个动作。

其它你可能感兴趣的问题
上一篇react-bootstrap手风琴不会与地图折叠 下一篇OpenSCAD 不渲染多面体