使用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收集当前路由中组件的所有需求(需要在呈现组件之前调度的一系列操作).它会在调度所有必需的操作时返回一个promise.

阅读代码是一种更清晰的方法,可以找出这里发生的事情.

概观

这是一种指定在渲染组件之前应该调度的一些操作的方法.

此组件将posts属性从Redux存储映射到调用的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)));
  };
}

当操作完成调度后,商店的数据可以映射到连接的组件.

警告

这不是为React组件指定异步依赖项的通用方法.它只能工作,因为mern有一个调用fetchComponentData它在服务器端调用的实用程序方法,以便在渲染之前填充Redux存储.

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

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

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

当Promise.all(promise)完成的promise返回完成后,将填充Redux存储,组件可以安全地呈现其数据以提供给客户端.

句法

你提到你认为它可能与ES6类有关,所以我也会快速介绍语法.

ES6类不能在类文字中指定静态属性,而是在定义后必须将它们声明为类中的属性.

needs属性必须是返回promises的函数数组fetchComponentData.在这种情况下,我们在数组文字中声明了一个箭头函数.将它分成单独的变量可能会有所帮助.

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