looked through a bunch of articles, as it is all very complicated

How to implement ajax request in react ?

Is there a working example?

UPDATE

I use redux

I am trying to update the store via ajax

 var React = require("react"); var ReactDOM = require("react-dom"); var redux = require("redux"); var Provider = require("react-redux").Provider; var reducer = require("./reducer"); var AppView = require("./appview"); var ReduxThunk = require('redux-thunk').default; var store = redux.createStore(reducer, redux.compose(redux.applyMiddleware(ReduxThunk))); store.dispatch(getItems()); function getItems() { fetch('/items.json') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); return { type: "SET_STATE", state: { items: data.items } } }) .catch( alert ); } ReactDOM.render( <Provider store={store}> <AppView /> </Provider>, document.getElementById("container") );

I get the error:

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions

data from JSON considered, but how to give it to the store correctly?

  • React is about View, not about requests. - Nofate ♦
  • You can use XHR, $ajax , fetch , rest.js, wrap it all in redux-thunk (if you use redux), Relay / GraphQL - a lot of options. - Nofate ♦
  • Maybe this will lead to a specific question: andrewhfarmer.com/react-ajax-best-practices - Nofate ♦
  • @Nofate, thanks. Updated the question. - ravend
  • You need to learn js, on the face of not understanding how books begin - asynchrony. Question to the reactor does not apply. There used to be questions - “what to learn js or jq”, and now they will be “what to learn js or react”, or even in general - “what to learn js or redux”. - user220409

1 answer 1

For this purpose, I use axios. Create an action:

  import axios from 'axios' import { AJAX_REQUEST, AJAX_SUCCESS, AJAX_ERROR } from '../constants/appConstants' export function ajaxRequestFunction(requestData) { var url = 'http://youURL'; var request = requestData; return (dispatch) => { dispatch({ type: AJAX_REQUEST, payload: {} }) axios.post(url, request) .then(result => { dispatch({ type: AJAX_SUCCESS, payload: { result: result.data, } }) }) .catch(error => { dispatch({ type: AJAX_ERROR, payload: {}, errors: error }) }) } }

In the listener, listen to the relevant events and change the state:

 import { AJAX_REQUEST, AJAX_SUCCESS, AJAX_ERROR } from '../constants/appConstants' const initialState = { data: false, } export default function sideNav(state = initialState, action) { var newState switch (action.type) { case AJAX_SUCCESS: return { ...state, data: action.payload.result} default: return state; } }

Do not forget to define event constants in ./constants/appConstants:

 export const AJAX_REQUEST = 'AJAX_REQUEST' export const AJAX_SUCCESS= 'AJAX_SUCCESS' export const AJAX_ERROR= 'AJAX_ERROR'

And of course the action call in the component:

 import React, { Component} from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import ReactDOM from 'react-dom' import * as appActions from '../../../actions/appActions' class pageComponent extends Component { clickHandler(){ const {ajaxRequestFunction} = this.props.appActions; let request = "привет" ajaxRequestFunction(request); } render() { return <div> <div onclick={this.clickHandler.bind(this)}>Кликни меня</div> </div> } } function mapStateToProps(state) { return { app: state.app, } } function mapDispatchToProps(dispatch) { return { appActions: bindActionCreators(appActions, dispatch), } } export default connect(mapStateToProps, mapDispatchToProps)(pageComponent)
  • Thank. And show, please, call ajaxRequestFunction - ravend
  • You are welcome. Updated the answer. - Mikl
  • fetch cooler than axios - user220409
  • hmm ... they are just a little different andrewhfarmer.com/ajax-libraries - Mikl
  • they are not just different, they are very different. axios was cool before fetch, because it was probably the only one that was truly isomorphic. But now there is a fetch, which is native and there is an isomorphic-fetch, which perfectly complements it and uniquely sends axios to technical knockout. - user220409