1

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

как реализовать 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?

9
  • React - это про View, а не про запросы.
    – Nofate
    Commented 7 апр. 2017 в 13:08
  • Вы можете использовать XHR, $ajax, fetch, rest.js, обмотать это все в redux-thunk (если используете redux), Relay/GraphQL - куча вариантов.
    – Nofate
    Commented 7 апр. 2017 в 13:17
  • Может быть, это наведет на конкретный вопрос: andrewhfarmer.com/react-ajax-best-practices
    – Nofate
    Commented 7 апр. 2017 в 13:18
  • @Nofate, спасибо. Обновил вопрос.
    – ravend
    Commented 7 апр. 2017 в 14:08
  • Вам нужно учить js, на лицо не понимание того с чего начинаются книжки - асинхронность. Вопрос к реакту не относится. Раньше были вопросы - "что учить js или jq", а теперь будут - "что учить js или react", а то и вообще - "что учить js или redux".
    – user220409
    Commented 7 апр. 2017 в 14:57

1 ответ 1

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)
7
  • Спасибо. А покажите, пожалуйста, вызов ajaxRequestFunction
    – ravend
    Commented 7 апр. 2017 в 15:03
  • Пожалуйста. Обновил ответ.
    – Mikl
    Commented 7 апр. 2017 в 15:12
  • fetch круче чем axios
    – user220409
    Commented 7 апр. 2017 в 15:17
  • хм... они просто немного разные andrewhfarmer.com/ajax-libraries
    – Mikl
    Commented 7 апр. 2017 в 15:22
  • они не просто разные, они очень разные. axios был крут до появления fetch, ведь он, наверное единственный, был по настоящему изоморфным. Но теперь есть fetch, который является нативным и есть isomorphic-fetch, который его прекрасно дополняет и однозначно отправляет axios в технический нокаут.
    – user220409
    Commented 7 апр. 2017 в 15:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.