使用 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.

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

概览

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

此组件将 posts 属性从 Redux 商店映射到一个名为 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() 的调用中编辑的操作 return。

// 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。然后它执行“需要”并等待所有承诺完成。

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

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

语法

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

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

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

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

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

Using mern.io scaffolder tool - What is the .need method all about?

javascript

reactjs

redux

mern

概览

警告

语法