Der Versuch, eine Aktion aus dem Ereignishandler fabric.js zu senden, führt dazu, dass "Reduzierungen möglicherweise keine Aktionen versenden".

Question

Ich entwickle eine App mit fabric.js und redux/react.

Kurz gesagt, was ich will ist, wenn ich ein Objekt auf der Leinwand, die es ausgewählt und in den App-Status geschrieben hat, hinzufügen.

Und hier ist, was ich für jetzt habe - wenn ich auf ein Objekt auf der Leinwand klicken wird das "object: selected" Ereignis ausgelöst und ich verschicke die Aktion, um das ausgewählte Objekt in den Zustand meiner App zu speichern.

fabricCanvas.on('object:selected', function(options) { 
    store.dispatch({ 
     type: 'SET_SELECTED_OBJECT', 
     object: options.target 
    }) 
}) 

Es funktioniert recht gut, aber der Spaß beginnt, wenn ich Objekt automatisch versuchen, so ausgewählt werden, wenn es auf die Leinwand hinzugefügt wird.

fabricCanvas.on('object:added', function(options) { 
    fabricCanvas.setActiveObject(options.target) 
}) 

Die Funktion SetActiveObject() löst das „Objekt: ausgewählt“, was ziemlich logisch ist und ich erwartete, mit der Absendung mein Handler, sondern erlaubt mir, mit ihm zu arbeiten

Uncaught Error: Reducers may not dispatch actions. 

Ich weiß, dass es eine Beschränkung, um Aktionen von Reduzierern zu versenden, aber ich kann nicht verstehen, warum Redux denkt, dass ich versuche.

Aus dem Event-Handler trigger ich ein anderes Ereignis, das eine Aktion versenden. Was mache ich falsch?

AKTUALISIERT:
Beide Handler werden in index.js definiert, direkt nachdem das Geschäft und das Fabric definiert wurden.

import 'babel-polyfill'; 
import React from 'react' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import rootReducer from './reducers' 
import App from './components/App' 

import { clearSelectedObject, setSelectedObject, addObject } from './actions' 
import initialState from './initialState.js' 



let store = createStore(rootReducer, initialState, window.devToolsExtension && window.devToolsExtension()) 


render(
    <div id="ocdc-holder"> 
     <Provider store={store}> 
      <App /> 
     </Provider> 
    </div>, 
    document.getElementById('root') 
) 

const fabricCanvas = new fabric.Canvas('canvas-lower') 

fabricCanvas.on('object:added', function(options) { 
    fabricCanvas.setActiveObject(options.target) 
}) 

fabricCanvas.on('object:selected', function(options) { 
    store.dispatch({ 
     type: 'SET_SELECTED_OBJECT', 
     object: options.target 
    }) 
}) 

Hier ist meine reducers.js http://pastebin.com/SFHZ9jVr Datei

Answer 1

Ihre Handhabung ADD_TEXT Aktion reducers.js Datei:

const newTextObj = new fabric.Text(action.payload.text) 
fabricCanvas.add(newTextObj) 
fabricCanvas.fire('object:selected') 
return { 
    ...state, 
    objects: [ 
     ...state.objects, 
     newTextObj 
    ] 
} 

Sie sollten keine Ereignisse in Reduzierungen feuern.

Feuer sie vor/nach Dispatching ADD_TEXT Aktion:

// Somewhere in component, or where you are dispatching `ADD_TEXT` action. 
const newTextObj = new fabric.Text(action.payload.text) 
fabricCanvas.add(newTextObj) 
fabricCanvas.fire('object:selected') 

Reduzierungen sollten von Nebenwirkungen frei. Alles, was Reducer tun sollte, ist, einen neuen Status zurückzugeben, indem der vorherige Status und die ausgeführte Aktion verwendet werden.

Sie erhalten diesen Fehler, weil Sie 'object:selected' Ereignis in Reducer auslösen, die Aktion Dispatching produziert.