Как сделать ajax запрос в reactjs?

388

09 апреля 2017, 03:24

просмотрел кучу статей, как то все очень усложнено

как реализовать ajax запрос в react?

есть ли рабочий пример?

UPDATE

использую redux

пытаюсь обновить store через 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")
);

получаю ошибку:

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

данные из JSON считались, но как правильно их отдать в store?

Answer 1

Для этой цели я использую axios. Создаете экшн:

 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
                 })
             })
     }
 }

В редюсере слушаете соответствующие события и менятете стейт:

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;
    }
}

Не забудьте определить константы евентов в ./constants/appConstants:

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

Ну и конечно вызов экшна в компоненте:

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)