使用 Axios 从 React/Redux 应用程序发送参数

Question

我很难理解如何将参数放入 axios.post 请求中？到目前为止我的应用程序的一些信息：

我有一个正在与 RethinkDB 实例对话的快速应用程序。我还有一个单独的 React/Redux 应用程序。我可以在我的动作创建者中使用 axios.get 成功命中我的快速端点，并在 React 组件中显示该数据（用户）。但是，现在我正在尝试将参数发送到我的 express 应用程序中的另一条路线，并将该用户保存在 rethinkdb 数据库中。我暂时不关心身份验证。我在 express 端正确设置了它，并且可以通过 curl 从 express 应用程序中将虚拟用户保存到数据库，但我不知道如何根据 react app/react 的请求发送所需的参数形式。请在下面找到一些相关代码。

来自我的 Express 应用 API，当手动点击时成功将测试用户保存到数据库。

var TestUser = thinky.createModel("TestUser", {
  id: String,
  name: String,
  email: String,
})

router.get('/newUser', (req, res) => {
  TestUser.save({
    name: 'sawyer',
    email: 'sawyer@test.com'
  }).then((result) => {
    console.log('Saved!')
    res.send(result)
  })
})

..下面是我在单独的 `React and Redux App` 中的操作文件中的代码片段。老实说，我不太确定写它并包含 `user` 对象。

function addUser (user) {
  return {
    type: ADD_USER,
    user,
  }
}

export function addAndSaveUser (user) {
  return function (dispatch) {
    return dispatch(addUser(user)).then({
      axios.post("http://localhost:3000/users/newUser", )
    })
  }
}

如有任何帮助，我们将不胜感激。

Answer 1

只需将 user 对象作为第二个参数传递

axios.post("http://localhost:3000/users/newUser", user)

最好在成功创建后调度 addUser 操作。

export function addAndSaveUser (user) {
  return function(dispatch) {
    axios.post("http://localhost:3000/users/newUser", user).then(res => {
      dispatch(addUser(res.data));
    });
  };
}

Answer 2

redux-thunk 可以使用 withExtraArgument 方法添加额外的参数，

import axios from 'axios'
import {combineReducers, createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import listTodoReducer from './components/ListTodo/ListTodo.reducer'

const API_ENDPOINT = "https://api...."

//combine project reducers
const reducers = combineReducers({
listTodoReducer
});

const api = axios.create({
headers:{
    authorization: 'TOKEN'
},
baseURL: `${API_ENDPOINT}/`
})

const store = createStore(
reducers,
applyMiddleware(thunk.withExtraArgument(api)) <------ LOOK
);

export default store

您可以在此处阅读更多相关信息 Axios as an extra parameter for redux-thunk

使用 Axios 从 React/Redux 应用程序发送参数

Sending params from React/Redux App with Axios

express

reactjs

redux

rethinkdb

axios

来自我的 Express 应用 API，当手动点击时成功将测试用户保存到数据库。

..下面是我在单独的 `React and Redux App` 中的操作文件中的代码片段。老实说，我不太确定写它并包含 `user` 对象。

使用 Axios 从 React/Redux 应用程序发送参数

Sending params from React/Redux App with Axios

express

reactjs

redux

rethinkdb

axios

来自我的 Express 应用 API，当手动点击时成功将测试用户保存到数据库。

..下面是我在单独的 React and Redux App 中的操作文件中的代码片段。老实说，我不太确定写它并包含 user 对象。

..下面是我在单独的 `React and Redux App` 中的操作文件中的代码片段。老实说，我不太确定写它并包含 `user` 对象。