javascript - 使用 mern.io 脚手架工具 - .need 方法是什么？

Question

基于脚手架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

Answer 1

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

fetchComponentData collects all the needs (need is an array of actions that are required to be dispatched before rendering the component) of components in the current route. It returns a promise when all the required actions are dispatched.

通读代码可以更清楚地了解这里发生了什么。

概览

这是一种指定在呈现组件之前应分派(dispatch)的一些操作的方法。

此组件将 posts 属性从 Redux 存储映射到名为 posts 的 prop，以便它可以呈现帖子列表。

// 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 };

此组件需要帖子在呈现之前可用，因此它会将调用返回的操作分派(dispatch)给 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 完成调度时，商店的数据可以映射到连接的组件。

警告

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

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

此方法遍历来自第二个参数的组件，以从每个组件中提取需求。然后它执行“需要”并等待所有 promise 完成。

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

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

语法

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

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

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

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