5

基于脚手架mern.io，我正在浏览代码以查看发生了什么。我偶然发现了一个 .need 方法，它看起来像是与 es6 类相关的东西。我似乎在任何地方都找不到任何可用的信息，所以我问这是什么.need方法？

class PostContainer extends Component {
   //do class setup stuff here
}

PostContainer.need = [() => { return Actions.fetchPosts(); }];

您可以使用这些命令轻松启动和运行项目。

npm install -g mern-cli
mern YourAppName
4

1 回答 1

6

在解释这一点时，mern 文档非常简洁。

fetchComponentData收集当前路由中组件的所有需求（需求是在渲染组件之前需要调度的一系列操作）。当所有必需的操作都被调度时，它会返回一个承诺。

通读代码是找出这里发生了什么的更清晰的方法。

概述

这是一种指定在渲染组件之前应该分派的一些操作的方法。

该组件将postsRedux 存储中的属性映射到一个名为的 prop posts，以便它可以呈现帖子列表。

// PostContainer.jsx
function mapStateToProps(store) {
  return {
    posts: store.posts,
  };
}

但是，最初此属性将为空，因为需要从异步 API 获取帖子。

// reducer.js
// initial state of the store is an empty array
const initialState = { posts: [], selectedPost: null };

该组件需要在渲染之前发布可用的帖子，因此它将调用返回的操作分派给Actions.fetchPosts().

// actions.js
export function fetchPosts() {
  return (dispatch) => {
    return fetch(`${baseURL}/api/getPosts`).
      then((response) => response.json()).
      then((response) => dispatch(addPosts(response.posts)));
  };
}

当 action 完成调度后，store 的数据可以映射到连接的组件。

警告

这不是为 React 组件指定异步依赖的通用方法。它之所以有效，是因为 mern 有一个fetchComponentData在服务器端调用的实用方法，以便在渲染之前填充 Redux 存储。

// server.js
fetchComponentData(store.dispatch, renderProps.components, renderProps.params)

此方法遍历第二个参数中的组件以needs从每个参数中提取。然后它执行 'needs' 并等待所有的 Promise 完成。

// fetchData.js
const promises = needs.map(need => dispatch(need(params)));
return Promise.all(promises);

当完成返回的承诺时Promise.all(promise)，Redux 存储将被填充，并且组件可以安全地呈现它们的数据以提供给客户端。

句法

您提到您认为它可能与 ES6 类有关，所以我也会快速介绍语法。

ES6 类不能在类字面量中指定静态属性，相反，我们必须在类定义后将它们声明为类的属性。

needs 属性必须是返回要使用的承诺的函数数组fetchComponentData。在这种情况下，我们在数组文字中声明了一个箭头函数。将其拆分为单独的变量可能会有所帮助。

const fetchPosts = () => { return Actions.fetchPosts() };
const needs = [fetchPosts];
PostContainer.need = needs;
于 2016-02-25T01:27:17.780 回答