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

Question

[DisaPadla]

Здесь уже был такой вопрос, но я не очень сумел разобраться. Мне нужно отправить обычный 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;

Answer 1

[Никита Гущин]

Для работы с 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...

Comments

[DisaPadla]

Спасибо за ответ. У меня вот вопрос, как в редюсере и экшене они находт друг друга через 'GET_BOOK-SUCCESS' и подобное. Я воспользовался console.log(action.type) и мне выдало @@redux/INIT, @@redux/PROBE_UNKNOWN_ACTION_o.4.d.n.q.g.d.s.4.i,
@@INIT
@@reduxReactRouter/routerDidChange

[Никита Гущин]

DisaPadla: с помощью promiseMiddleware. Вот этот кусок кода - https://gist.github.com/iNikNik/3c1b870f63dc0de67c...

[DisaPadla]

Понял, спасибо. Только сейчас заметил, что это Вы мне вчера помогали

[DisaPadla]

воспользовался Вашими советами, но у меня почему-то не реагирует на action.type. В итоге возвращает default пустой объект

[Никита Гущин]

DisaPadla: не понял, что именно? Не диспачит экшен? Или тип не тот?

[Никита Гущин]

DisaPadla: У нас тут пока не особо много народу в реакте. Если с английским хорошо, то милости просим в дискорд - https://discord.gg/0ZcbPKXt5bYJBxpy . Основное комьюнити там. Если что можете меня там найти - 'niknik' и писать в лс.

Answer 2

[Максим]

Как было уже написано, да нужно использовать thunk-middleware, код которого кстати, очень простой!
Суть в том, что нужно проверить: если ваш action возвращает функцию - значит прокинь в него dispatch и getState и жди что будет дальше, а если ваш action - простой объект (как и задумывалось) - сразу прокинь его дальше. Так и работают middleware - добавляя функционал и пробрасывая выполнение дальше.

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

Спасибо.