Реагировать стартер связи комплект с RESTful API серверной службы

Question

https://github.com/kriasoft/react-starter-kit

У меня есть запустить сервер бэкенд API и я ищу рамки внешнего интерфейса. Затем я наткнулся на этот реактивный комплект, который кажется хорошим кандидатом.

Мое понимание заключается в том, что я имею дело с компонентами реагирования по одному за раз. и я могу поместить всю логику кода, такую ​​как вызовы API, изменения элементов DOM ... и т. д. в componentDidMount(), так что будет взаимодействие между DOM и логикой. (я прав?)

import React, { PropTypes } from 'react'; // eslint-disable-line no-unused-vars 
import styles from './ContactPage.less'; // eslint-disable-line no-unused-vars 
import withStyles from '../../decorators/withStyles'; // eslint-disable-line no-unused-vars 

@withStyles(styles) 
class ContactPage { 

    static contextTypes = { 
    onSetTitle: PropTypes.func.isRequired 
    }; 

    render() { 
    let title = 'Contact Us'; 
    this.context.onSetTitle(title); 
    return (
     <div className="ContactPage"> 
     <div className="ContactPage-container"> 
      <h1>{title}</h1> 
      <p>...</p> 
     </div> 
     </div> 
    ); 
    } 

} 

export default ContactPage; 

Это оригинальный код реагирующего компонента, который я пытаюсь взломать. Я попытался включить модуль «запрос», чтобы сделать http-запросы.

var request = require('request'); // for backend API calls 

componentDidMount() { 
    request('https://www.google.com') 
} 

Это не сработало. Так что я делаю неправильно здесь? Благодарю.

Сообщение об ошибке очень длинное, начинается со следующего сообщения.

ОШИБКА в ./~/request/lib/har.js Модуль не найден: Ошибка: Не удается разрешить модуль 'фс' в/Users/ssmlee04/Desktop/среагировать-стартер-кит/node_modules/запрос/Библиотека @ ./~/request/lib/har.js 3: 9-22

Answer 1

Request.js - это библиотека для узла. Он не предназначен для использования в браузере. Вот почему вы видите ошибку module fs not found. fs - модуль файловой системы узла js.

Поскольку вы уже используете ES6, я предлагаю использовать fetch (https://fetch.spec.whatwg.org/) для запроса на удаленный сервер. Он уже поддерживается хром и firefox. Чтобы иметь совместимость со старым браузером, вы можете использовать полис заполнения из github. Здесь это ссылка на репо https://github.com/github/fetch.

Answer 2

Если вы хотите работать с асинхронными данными, вы можете использовать: redux-thunk, redux-promises или redux-saga. Моя рекомендация состоит в том, чтобы использовать саму санузку, поскольку она предлагает больше возможностей и предотвращает проблемы с аддонами обратного вызова, используя функции генератора.

Я попробовал комплект для начинающих kriasoft, и я был недоволен количеством кода конфигурации шаблона, с которым он поставляется, поэтому я создал свой собственный стартовый комплект http://redux-minimal.js.org/, который содержит минимальное количество пакетов, но все же давайте создадим богатые реальные версии, мирового уровня, и имеет очень низкую конфигурацию шаблонов.

Я расскажу вам, как мне удалось реализовать API-интерфейсы в демонстрационном приложении, которое содержит сокращение-минимум. Сначала вот как работают саги. Обычно вы отправляете действие, а затем вызывается редуктор, и он управляет данными состояния. С сагами вы делаете то же самое. Вы отправляете действие, но на этот раз вызывается сага, которая обрабатывает запрос API, и когда она завершена, она отправляет действие, которое вызывает редуктор для обработки состояния.

Вот код в действии: https://github.com/catalin-luntraru/redux-minimal/tree/master/src_users

Я хочу получать список пользователей и поместить его в состоянии, поэтому в компоненте конструктора я называю

// when we don't have any users, update the state with the users list taken from the api 
if (0 === this.props.users.length) { 
    this.props.dispatch({type: 'usersFetchList'}); 
} 

Тогда я сделать связь между этим действие и сага с

export function* sagas() { 
    yield [ 
     fork(takeLatest, 'usersFetchList', usersFetchList), 
    ]; 
} 

тогда я определяю свою сагу, что делает вызов апи, а затем она посылает действие, которое будет заботиться о нашем Реду CER

export function* usersFetchList(action) { 
    // call the api to get the users list 
    const users = yield call(ApiUsers.getList); 

    // dispatch the success action with the users attached 
    yield put({ 
    type: 'users.fetchListSuccess', 
    users: users, 
    }); 
} 

В демке я использую некоторые фиктивные данные с SetTimeout, так что вы не можете видеть реальную выборку данных в действии, но вы можете легко использовать изоморфными-выборку для выборки данных https://github.com/matthew-andrews/isomorphic-fetch. Вот пример

fetch('//offline-news-api.herokuapp.com/stories') 
.then(function(response) { 
    return response.json(); 
}); 

И в редукторе мы просто поместить список пользователей в состоянии

static fetchListSuccess(new_state, action) 
{ 
    new_state.list = action.users; 
    return new_state; 
} 

И это все. Это, вероятно, легко, если вы создаете новый проект и устанавливаете сокращаемый минимальный уровень, который является простым клоном git, а затем npm install, а затем см. Демонстрационное приложение в действии. Затем откройте инструменты сокращения, чтобы увидеть срабатывающие действия. Но суть этого - это то, что я описал выше.

Redux-minimal также интегрирован с реактивным маршрутизатором для страниц, реактивной бутстрапом и сассой для упрощения дизайна.