javascript - react - mevn

Usando la herramienta mern.io scaffolder-¿De qué se trata el método.need?

Question

Basado en el scaffolder mern.io , estaba revisando el código para ver qué estaba pasando. Me encontré con un método .need que parece algo relacionado con las clases es6. Parece que no puedo encontrar ninguna información utilizable en ningún lado, entonces pregunto ¿cuál es el método .need ?

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

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

Puede ejecutar el proyecto muy fácilmente con estos comandos.

npm install -g mern-cli
mern YourAppName

Answer 1

La documentación de mern es bastante escueta a la hora de explicar esto.

fetchComponentData recopila todas las necesidades (se necesita una matriz de acciones que se deben enviar antes de representar el componente) de los componentes en la ruta actual. Devuelve una promesa cuando se envían todas las acciones requeridas.

Leer el código es una forma mucho más clara de averiguar qué está pasando aquí.

Visión de conjunto

Es una forma de especificar algunas acciones que deberían enviarse antes de representar el componente.

Este componente asigna la propiedad de posts de la tienda de Redux a un accesorio llamado posts para que pueda mostrar la lista de publicaciones.

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

Sin embargo, inicialmente, esta propiedad estará vacía porque las publicaciones deben obtenerse de una API asíncrona.

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

Este componente necesita que las publicaciones estén disponibles antes de que se procesen, por lo que distribuye la acción devuelta desde la llamada a Actions.fetchPosts() .

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

Cuando la acción ha terminado de enviarse, los datos de la tienda pueden asignarse al componente conectado.

Advertencia

Esta no es una forma universal de especificar dependencias asincrónicas para los componentes de React. Solo funciona porque mern tiene un método de utilidad llamado fetchComponentData que llama en el lado del servidor, para llenar el almacén de Redux antes de la representación.

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

Este método atraviesa los componentes del segundo argumento para extraer las needs de cada uno. Luego ejecuta ''necesidades'' y espera a que se completen todas las promesas.

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

Cuando se Promise.all(promise) la promesa devuelta por Promise.all(promise) , se completará la tienda de Redux y los componentes podrán presentar sus datos de manera segura para que se sirvan al cliente.

Sintaxis

Mencionaste que pensabas que podría estar relacionado con las clases ES6, así que también cubriré la sintaxis rápidamente.

Las clases de ES6 no pueden tener propiedades estáticas especificadas en el literal de la clase, en su lugar, tenemos que declararlas como propiedades en la clase después de que se haya definido.

La propiedad de necesidades debe ser un conjunto de funciones que devuelven promesas de funcionar con fetchComponentData . En este caso, tenemos una función de flecha declarada dentro de una matriz literal. Podría ayudar ver que se divida en variables separadas.

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