Action non appelée - réaction du flux

Question

Builder Action positionRComponent non appelée. Est-ce que je fais quelque chose de mal? Découvrez la ligne de commentaire dans moveBox dans BuildView.js

Sortie attendue: à imprimer dans la console.

Position R Composant

Voici les extraits de code de BuildView.js et le constructeur-actions.js.

BuildView.js

import React, {PropTypes} from 'react'; 
import BuilderStore from '../stores/builder-store'; 
import BuilderActions from '../actions/builder-actions' 
import update from 'react/lib/update'; 
import ItemTypes from './ItemTypes'; 
import RComponent from './RComponent'; 
import { DropTarget } from 'react-dnd'; 
import HTML5Backend from 'react-dnd-html5-backend'; 

function getViewRComponents(){ 
    return({components: BuilderStore.getViewRComponents()}) 
} 
const rComponentTarget = { 
    drop(props, monitor, component) { 
    const item = monitor.getItem(); 
    const delta = monitor.getDifferenceFromInitialOffset(); 
    const left = Math.round(item.left + delta.x); 
    const top = Math.round(item.top + delta.y); 
    component.moveBox(item.id, left, top); 
    } 
}; 

const wrapper = { 
    border: '1px solid grey' 
} 

function collect(connect, monitor){ 
    return ({ 
    connectDropTarget: connect.dropTarget() 
    }) 
} 

class BuildView extends React.Component{ 
    constructor(props){ 
    super(props); 
    this.state = getViewRComponents(); 
    this._onChange = this._onChange.bind(this); 
    } 
    moveBox(id, left, top) { 

    this.setState(update(this.state, { 
     components: { 
     [id]: { 
      $merge: { 
      left: left, 
      top: top 
      } 
     } 
     } 
    })); 
    //CALLING HERE>>> Not getting called 
    BuilderActions.positionRComponent.bind(null, this.state.components[id]); 

    } 
    componentWillMount(){ 
    BuilderStore.addChangeListener(this._onChange) 
    } 
    render(){ 
    const { hideComponentOnDrag, connectDropTarget } = this.props; 

    let components = this.state.components.map((component, index) => { 
     return(<RComponent 
     key={index} 
     id={index} 
     left={component.left} 
     top={component.top} 
     hideComponentOnDrag={hideComponentOnDrag}> 
     {component.name} 
     </RComponent>); 
    }) 
    return connectDropTarget(
     <div> 
     {components} 
     </div> 

    ); 
    } 
    _onChange(){ 
    this.setState(getViewRComponents()); 
    } 
    componentWillUnMount(){ 
    BuilderStore.removeChangeListener(this._onChange()) 
    } 
} 
BuildView.propTypes = { 
    hideComponentOnDrag: PropTypes.bool.isRequired, 
    connectDropTarget: PropTypes.func.isRequired 
}; 

export default DropTarget(ItemTypes.RCOMPONENT,rComponentTarget, collect)(BuildView); 

constructeur-actions.js

import BuilderConstants from '../constants/builder-constants'; 
import {dispatch, register} from '../dispatchers/builder-dispatcher'; 

export default { 
    addRComponent(component) { 
    console.log("Add R Component") 
    dispatch({ 
     actionType: BuilderConstants.ADD_RCOMPONENT, component 
    }) 
    }, 
    removeRComponent(component){ 
    dispatch({ 
     actionType: BuilderConstants.REMOVE_RCOMPONENT, component 
    }) 
    }, 
    positionRComponent(component){ 
    console.log("Position R Component"); 
    dispatch({ 
     actionType: BuilderConstants.POSITION_RCOMPONENT, component 
    }) 
    } 
} 

Answer 1

Utilisez call ou exécuter la fonction de retour bind:

var f = BuilderActions.positionRComponent.bind(null, this.state.components[id]) 
f() 

ou:

BuilderActions.positionRComponent.call(null, this.state.components[id]); 

La différence est bind n'exécute pas, mais retourne une nouvelle fonction avec la liste des arguments passés dans la nouvelle fonction.

call fait bind puis exécute, apply est similaire mais prend un tableau d'arguments.

Espérons que ça aide.