Versand ist keine Funktion

Question

Ich versuche, die redux-file-upload Bibliothek in eine Redux-Anwendung hinzuzufügen.

In meiner Komponente füge ich nur die aus der lib exportierte Komponente hinzu.

Ich kann sehen, dass der Laden über context innerhalb der Bibliothek verwiesen wird.

Beispielcode ist als unten,

import React, { Component } from 'react'; 
import { FileUpload } from 'redux-file-upload'; 

class Upload extends Component { 
    render() { 
    return (
     <FileUpload 
     allowedFileTypes={['jpg', 'pdf']} 
     dropzoneId="fileUpload" 
     url="/api/path/action" 
     > 
     <button> Drag or click here 
     </button> 
     </FileUpload> 
    ); 
    } 
} 

export default Upload; 

Allerdings erhalte ich Fehler als

Uncaught TypeError: dispatch is not a function

Irgendwelche Ideen? Raten Sie, es ist ein Fehler beim Importieren der Komponente.

Answer 1

Uncaught TypeError: dispatch is not a function

Ich bin aus verschiedenen Gründen auf diesen Fehler oft gestoßen. Ich kann nicht in den Quellcode dieser Bibliothek eintauchen, aber es sieht so aus, als ob diese Bibliothek keine dispatch Funktion von dem Redux store bekommen kann. Haben Sie versucht, Ihre Komponente an die Redux store mit connect() Methode anzuschließen? Es ist ein langer Schuss. Dachte, es könnte funktionieren! Lassen Sie mich wissen ...

UPDATE ich RELATED_LINKS hier bin zu werfen, in der Hoffnung, dass Sie das entsprechende Stück Code finden würde.

https://github.com/reactjs/react-redux/issues/108

React with Redux? What about the 'context' issue?

https://github.com/reactjs/react-redux/issues/108

Answer 2

Sie müssen importieren 'Redux-Form', der Code sollte so sein ...

import React, { Component } from 'react'; 
import { FileUpload } from 'redux-file-upload'; 
import {reduxForm} from 'redux-form'; 

class UploadForm extends Component { 
    render() { 
    return (
     <FileUpload 
     allowedFileTypes={['jpg', 'pdf']} 
     dropzoneId="fileUpload" 
     url="/api/path/action" 
     > 
     <button> Drag or click here 
     </button> 
     </FileUpload> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'upload-form', 
    fields: ['fileUpload'] 
})(UploadForm); 

Answer 3

Verwenden Sie eine Middleware mit Sie speichern, wie Redux-Thunk/Redux-Versprechen?

Die Bibliothek Sie requires it verwenden:

"Please note - a middleware that passes dispatch to actions, e.g. redux-thunk, redux-promise-middleware, is required for this package to work properly."

Also, wenn Sie verwenden, reagieren-redux und den Provider yuo kann folgendes tun:

import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import promise from 'redux-promise' 

const storeWithMiddleware = applyMiddleware(promise)(createStore);