dispatch is not a function

Question

I am trying to add the redux-file-upload library into a redux application.

In my component I am just adding the component exported from the lib.

I can see that the store is referred via context inside the library.

Sample code is as below,

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;

However I get error as

Uncaught TypeError: dispatch is not a function

Any ideas? Guess it is some mistake in importing the component.

score 0 · Answer 1 · edited May 23 '17 at 12:30

0

Uncaught TypeError: dispatch is not a function

I have come across this error many times for different reasons. I can't dive into the source code of that library, but it looks like that library is not able to get dispatch function from the redux store. Have you tried connecting your component to the redux store using connect() method? It's a long shot. Thought, it might work! Let me know...

UPDATE I'm throwing related links here, hoping that you'd find the relevant piece of code.

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

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

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

edited May 23 '17 at 12:30

Community

1
1

answered Aug 12 '16 at 09:33

Mihir

3,812
3
25
29

Yup I have tried connecting to the store from parent component.. Ideally it must work coz the context type set in the library.. And it should get access to store via the provider – anoop Aug 12 '16 at 09:38
Actually @gaearon replied to this and that's the idea used in the library https://github.com/reactjs/react-redux/issues/108#issuecomment-140778557 – anoop Aug 12 '16 at 09:49
@anoop Yes, I noticed that! And maybe I'm not fit to help you any further. Please update your question if you find the answer. That'll be very helpful to understand the behaviour of `context`. – Mihir Aug 12 '16 at 09:55
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/13316755) – Robert Columbia Aug 14 '16 at 02:52
@RobertColumbia Sorry for that! But one can write only so many characters in comment section. Hence the answer. Shall I delete it? – Mihir Aug 14 '16 at 02:56
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/13316755) – lokusking Aug 14 '16 at 09:51
@lokusking Right! I'll edit the answer as soon as possible. – Mihir Aug 14 '16 at 09:52

score 0 · Answer 2 · answered Nov 25 '16 at 14:19

0

You need import 'redux-form' , your code should be like this...

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);

answered Nov 25 '16 at 14:19

claudio Torres

1

can you please add some explanation as to why this should be done/works? – dubes Nov 25 '16 at 14:41
Thanks for the answer. But this may not work because the library mentioned is using context instead of connected components – anoop Nov 25 '16 at 15:00

Pineda · Answer 3 · 2016-11-25T15:10:33.023

0

Are you using a middleware with you store, like redux-thunk/redux-promise?

The library you are using requires it:

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

So if you are using react-redux and the Provider yuo can do the following:

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

const storeWithMiddleware = applyMiddleware(promise)(createStore);

edited Nov 25 '16 at 15:10

answered Nov 25 '16 at 15:06

Pineda

7,435
3
30
45

Could you update your question with how you are doing so? – Pineda Nov 25 '16 at 15:11
I think my question has enough details and more details can be found at this github issue https://github.com/blueberryapps/redux-file-upload/issues/11 – anoop Nov 25 '16 at 15:16

dispatch is not a function

3 Answers3