Question

我正在建立一个社交网站以作为回应。当当前用户打开其他用户的个人资料时，我应该直接从服务器获取用户详细信息到组件，还是先将其推送到存储，然后在组件中呈现它？如果我直接在componentWillMount中获取用户数据并将其保存到本地状态，以管理“跟随用户”之类的客户端交互，那会很好吗？

Answer 1

当需要一些数据时，我们调度fetch-action，一些中间件监听它并进行API调用，这些调用将转换为fetch-success或fetch-error。

Some example。

作为监听某些动作的中间件：
易于使用，难以测试-redux-thunk

高级-redux-observables，redux-saga

Answer 2

Sujoy，如果您能分享到目前为止的尝试，那就太好了。由于您没有提供任何可以帮助您重构的代码，所以这就是我的答案：

这就是您编写动作创建者的方式，我使用了jsonplaceholder.typicode.com中的api来获取一些假用户：

import axios from 'axios';

export function fetchUsers() {
  const request = axios.get('https://jsonplaceholder.typicode.com/users');

  return (dispatch) => {
    request.then(({data}) => {
      dispatch({ type: 'FETCH_PROFILES', payload: data });
    });
  };
}

为了了解上面发生的事情并使其正确运行，您需要使用redux-thunk并了解为什么要使用它。

之所以这样，是因为香草Redux希望您返回一个动作，这是一个计划JavaScript对象。另一方面，Redux Thunk启用了另一个返回类型，而这只是一个普通的JavaScript函数。

因此只有使用Redux Thunk才能返回纯JavaScript函数，如我在上面提供的代码示例中所见。

您将看到此函数的第一个参数是dispatch方法。 dispatch充当了将数据下达到reducer的管道，但是有了Redux Thunk，它的功能就在您的控制中，更加手动，并用于异步操作（例如您所描述的内容）。

因此，上面的代码正在等待请求处理大量数据，直到请求解决后，它才会分派操作并注意还使用了名为axios的软件包，强烈建议http请求。

对于App.js文件，它看起来像这样：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';

class App extends Component {
  componentWillMount() {
    this.props.fetchUsers();
  }

  renderUser({id, name, email}) {
    return (
      <li className="list-group-item" key={id}>
        <span className="label pull-xs-right">
          <a href={email}>{email}</a>
        </span>
        {name}
      </li>
    );
  }

  render() {
    return (
      <div>
        <h4>Email Directory</h4>
        <ul className="list-group">
          {this.props.users.map(this.renderUser)}
        </ul>
      </div>
    );
  }
}

export default connect((state => state), actions)(App);

上述操作是获取用户列表，然后为每个用户呈现一个li。在这种情况下，我向用户显示{email}和{name}。因此，fetchUsers()是动作创建者，您可以在componentWillMount()的内部看到它，我相信这也是您要问的问题。所以这应该为您工作。

直接获取或在Redux中存储，渲染

2 个答案: