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;

这是我试图破解的反应组件的原始代码。我试图包括＆＃34;请求＆＃34;模块，以便我可以发出http请求。

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

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

它没有用。那我在这里做错了什么？感谢。

错误消息很长，从以下消息开始。

错误在./~/request/lib/har.js 找不到模块：错误：无法解析模块＆＃39; fs＆＃39;在/ Users / ssmlee04 / Desktop / react-starter-kit / node_modules / request / lib中 @ ./~/request/lib/har.js 3：9-22

Answer 1

Request.js是Node的lib。它并不打算在浏览器中使用。这就是您看到错误module fs not found的原因。 fs是节点js的文件系统模块。

由于您已经在使用ES6，我建议使用fetch（https://fetch.spec.whatwg.org/）向远程服务器发出请求。它已经得到chrome和firefox的支持。要与旧版浏览器兼容，您可以使用github中的fetch polyfill。这是回购https://github.com/github/fetch的链接。

Answer 2

如果您想使用异步数据，那么您可以使用：redux-thunk，redux-promises或redux-saga。我的建议是使用redux-saga，因为它提供了更多功能，并通过使用生成器函数来防止回调地狱问题。

我尝试了kriasoft入门套件，我对它附带的样板配置代码量不满意，所以我创建了自己的入门套件http://redux-minimal.js.org/，其中包含最少量的套件，但仍然让＆＃39;您构建了丰富的真实应用程序，并且具有非常低的样板配置。

我将指导您如何在redux-minimal包含的演示应用程序中实现API。首先是这里的传奇工作原理。通常，您调度操作然后调用reducer并管理状态数据。用传奇，你做同样的事情。您调度一个动作，但这次调用了一个处理API请求的传奇，当它完成时，它会调度一个调用reducer来处理状态的动作。

以下是行动中的代码：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),
    ];
}

然后我定义了我的传奇，它进行了api调用，然后它调度了一个由我们的reducer处理的动作

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的虚拟数据，因此您无法看到实际的提取操作，但您可以轻松地使用isomorphic-fetch来获取数据https://github.com/matthew-andrews/isomorphic-fetch。这是一个例子

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

在reducer中，我们只是将用户列表置于状态

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

就是这样。如果您创建一个新项目并安装redux-minimal，这只是一个简单的git克隆，然后是npm install，那么它可能很容易，然后看看演示应用程序的运行情况。然后打开redux工具以查看触发的操作。但它的要点就是我上面所描述的。

Redux-minimal还集成了react-router，用于页面，react-bootstrap和sass，以便于设计。

与RESTful后端API服务

2 个答案: