如何使用 React Redux 发出 post 请求？

Posted 2023-02-22

【中文标题】如何使用 React Redux 发出 post 请求？

【英文标题】：How to make a post request using react redux?

【发布时间】：2019-04-05 15:37:16

【问题描述】：

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

我不明白我是否需要为 firstname、lastname 和 email 分别创建 3 个操作？在那种情况下，这 3 个动作将是什么，每个动作都有 3 个 POST 请求？

【问题讨论】：

我建议你阅读 Thunk 和中间件，以便在 Redux 中实现异步代码。

@RonF 我已经阅读了它现在我需要一些帮助来组织代码。我无法理解如何通过将 POST req 发送到 localhost:5000/api/users 来使用 react redux 来实现 loginUser

【参考方案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 将表单数据发布到服务器的流程是这样的

当点击提交按钮并发送动作时，让我们假设SAVE_USER_TO_SERVER 和一个包含所有用户详细信息（姓名、电子邮件等）的对象被传递给例如postUserThunkCreator()（这是一个类似 thunk 的函数在上面的例子中）。

然后 thunk 向服务器发出一个 post 请求并将数据连同它一起发送。在服务器端，它被保存到数据库中并返回响应

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

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

【讨论】：

我想问你。我应该创建 3 个操作，即 firstname、lastname、email 吗？然后减速器将有 3 种动作类型，对吗？你能把它添加到你的答案中吗？

好的，让我编辑答案以添加用于发布请求的 redux 流程

如果不需要 3 项操作，那么我将如何获得电子邮件、名字、姓氏？由于所有这些的初始状态都是“”所以我还应该创建用户对象 inisde 初始状态吗？我无法理解减速器和操作的外观？

是的，你应该在initialState中使用user = ，当用户被成功保存时SAVE_USER_TO_SERVER_SUCCESS更新存储中的用户。

当你调用动作创建者例如postUserThunkCreator()时，你会将用户信息传递给actionCreator，就像你的情况下的postUserThunkCreator(this.state.firstName, this.state.lastName, etc)一样。或者，如果您将所有字段都放在一个 user 对象中，那么只需 postUserThunkCreator(this.state.user)