React-dnd: Usando redux connect junto con el mapeo DropTarget

Creado en 9 feb. 2016  ·  5Comentarios  ·  Fuente: react-dnd/react-dnd

Estoy tratando de descubrir la forma correcta de conectar redux a mi componente que también es un destino de caída.

export default DropTarget(dragTypes, storyTarget, collect)(connect(mapStateToProps)(StoryEditor));

Así es como los estoy conectando en este momento, parece funcionar, pero quería verificar que esto sea correcto.

Comentario más útil

Lo haría así:

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

Todos 5 comentarios

Lo haría así:

import { compose } from 'redux'

export default compose(
  DropTarget(dragTypes, storyTarget, collect),
  connect(mapStateToProps)
)(StoryEditor);

En los documentos de React DnD, @gaearon usa _.flow para decorar un componente con varios componentes de nivel superior. Entonces, si estoy leyendo esto bien, en realidad podemos usar la función compose de redux, ¿correcto?

@ ekeric13 compose Redux es idéntico a _.flow con argumentos invertidos. Es decir,

compose(f, g, h)(x) === flow(h, g, f)(x) === f(g(h(x)))

@gaearon Usar compose funciona bien para mí, pero noté que la documentación de compose dice que la mayoría de las funciones pasadas para componer deben esperar un solo parámetro, pero podemos pasar tres argumentos a DropTarget . ¿Por qué funciona esto?

componer (... funciones)

Compone funciones de derecha a izquierda.

Esta es una utilidad de programación funcional y se incluye en Redux para su conveniencia.
Es posible que desee utilizarlo para aplicar varios potenciadores de tienda seguidos.

Argumentos

(argumentos): Las funciones para componer. Se espera que cada función acepte un solo parámetro. Su valor de retorno se proporcionará como un argumento para la función que se encuentra a la izquierda, y así sucesivamente. La excepción es el argumento más a la derecha que puede aceptar múltiples parámetros, ya que proporcionará la firma para la función compuesta resultante.

BuilderArea.propTypes = {
  addPanel: PropTypes.func.isRequired
};

const mapStateToProps = state => ({
  panels: state.panels
});

export default compose(
  DropTarget(Types.PANEL_CARD, builderAreaTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  })),
  connect(
    mapStateToProps,
    { addPanel }
  )
)(BuilderArea);
¿Fue útil esta página
0 / 5 - 0 calificaciones