Где и как нужно сделать AJAX запрос в redux?

Здесь уже был такой вопрос, но я не очень сумел разобраться. Мне нужно отправить обычный get запрос для получения данных из json с сервера. Как я понял, запрос пишется в action creator при помощи промиса, но как имено, я не сумел понять. Как правильно осуществляется запрос в архитектуре redux?
action
import $ from 'jquery';
export const GET_BOOK = 'GET_BOOK';

export default function getBook() {
  return {
    type: GET_BOOK,
    data: {
      promise: () => {
        return new Promise((resolve, reject) => {
          
        })
      }
    }
  };
}


reducer
import {GET_BOOK} from '../actions/books';

const booksReducer = (state = 0, action) => {
  switch (action.type) {
  case GET_BOOK:
    return action.data;
  default:
    return state;
  }
};

export default booksReducer;


container
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import getBook  from '../actions/books';
import Radium from 'radium';
import {Link} from 'react-router';

function mapStateToProps(state) {
  return {
    books: state.data.promise(),
  };
}

function mapDispatchToProps(dispatch) {
  return {
    getBooks: () => dispatch(getBook()),
  };
}

@Radium
@connect(mapStateToProps, mapDispatchToProps)
class booksPage extends Component {
  static propTypes = {
    books: PropTypes.array.isRequired,
  };

  render() {
    const {books} = this.props;
    return (
      <div>
        <p><Link to={`/authors`}>All Authors</Link></p>
        <ul>
          {books.map((book, index) =>
            <li key={index}>
              <p><Link to={`/book/${book.name}`}>{book.name}</Link></p>
              <p><Link to={`/author/${book.author}`}>{book.author}</Link></p>
            </li>
          )}
        </ul>
      </div>
    );
  }
}

export default booksPage;
  • Вопрос задан
  • 2784 просмотра
Пригласить эксперта
Ответы на вопрос 2
Для работы с promise Вам нужно использовать дополнительный middleware - promise middleware. Существует несколько реализаций - можете выбрать любой понравившийся. Я использую этот и относительно него буду далее писать.

Как я понял, запрос пишется в action creator при помощи промиса


Да, все так. В экшен-креаторе делаем запрос, возвращаем экшен с промисом. Далее promiseMiddleware подхватывает его и вместо одного экшена диспатчит 3 - действие началось, действие завершилось успешно, действие завершилось с ошибкой. Все это происходит в зависимости от того в какое состояние попал вышеупомянутый promise. Другими словами - "действие началось" диспатчится сразу; если запрос успешен - диспатчится "действие завершилось успешно".
Соответственно в вашем редьюсере Вы подписываетесь на это три действия. Пример:

// action creator
import fetch from 'isomorphic-fetch';

export default function getBook() {
  // Для запросов чаще всего используется  isomorphic-fetch, который возвращает promise
  const promise = fetch(url, options);
  return {
    types:  [ 'GET_BOOK-BEGIN', 'GET_BOOK-SUCCESS', 'GET_BOOK-FAILURE' ],
    promise,
  };
}


// reducer
import {GET_BOOK} from '../actions/books';

const booksReducer = (state = {}, action) => {
  switch (action.type) {
    case 'GET_BOOK-SUCCESS':
      // При успешном завершении у нас установлено свойство result с ответом сервера
      return action.result;
    case 'GET_BOOK-FAILURE':
      // При неудачном завершении у нас установлено свойство error с описанием ошибки
      doSomethingWithError(action.error); // <--- просто для примера
    default:
      return state;
  }
};

export default booksReducer;


UPD1 К слову: у редакса есть отличный пример, где все это можно в живую посмотреть - https://github.com/rackt/redux/tree/master/example...
Ответ написан
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Как было уже написано, да нужно использовать thunk-middleware, код которого кстати, очень простой!
Суть в том, что нужно проверить: если ваш action возвращает функцию - значит прокинь в него dispatch и getState и жди что будет дальше, а если ваш action - простой объект (как и задумывалось) - сразу прокинь его дальше. Так и работают middleware - добавляя функционал и пробрасывая выполнение дальше.

У меня есть подробное руководство по redux на русском, посмотрите здесь - https://www.gitbook.com/book/maxfarseer/redux-cour...

Спасибо.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы