React/Redux dispatch function doesn't work

Question

I am using 'react-fileupload' to upload files on my server. In case of success I receive response with content of this file. So in one component I want to upload file and change stores state and in another component I want to show that data.

But i don't know why my dispatch function doesn't work.

Component with uploader:

import React, { Component } from 'react';
import FileUpload from 'react-fileupload';
import { connect } from 'react-redux';
import { updateOverview } from '../actions/index';
import { bindActionCreators } from 'redux';

class Header extends Component {
  render() {
    const options = {
      baseUrl: 'http://127.0.0.1:8000/api/upload_file',
      chooseAndUpload: true,
      uploadSuccess: function(res) {
        console.log('success');
        updateOverview(res.data);
      },
      uploadError: function(err) {
        alert(err.message);
      }
    };
    return (
      <div>
        <FileUpload options={options} ref="fileUpload">
          <button
            className="yellow darken-2 white-text btn-flat"
            ref="chooseAndUpload">
            Upload
          </button>
        </FileUpload>
      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ updateOverview }, dispatch);
}

export default connect(null, mapDispatchToProps)(Header);

Component where data is shown:

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Overview extends Component {
  renderContent() {
    console.log(this.props.overview);
    if (!this.props.overview) {
      return <div> Upload file!</div>;
    }
    return this.props.overview;
  }
  render() {
    return (
      <div>
        <h1>Overview</h1>
        {this.renderContent()}
      </div>
    );
  }
}
function mapStateToProps({ overview }) {
  return { overview };
}
export default connect(mapStateToProps)(Overview);

Action creator:

import { FETCH_OVERVIEW } from './types';

export function updateOverview(data) {
  return { type: FETCH_OVERVIEW, payload: data };
}

reducer index.js

import { combineReducers } from 'redux';
import overviewReducer from './overviewReducer';

export default combineReducers({
  overview: overviewReducer
});

overviewReducer.js

import { FETCH_OVERVIEW } from '../actions/types';
export default function(state = null, action) {
  switch (action.type) {
    case FETCH_OVERVIEW:
      return action.payload;
    default:
      return state;
  }
}

you are directly calling the action updateOverview, please try with this.props.updateOverview — Raghav Garg
– Raghav Garg, Commented Sep 3, 2017 at 9:50
I see from the docs that bindActionCreators takes a function or object. Maybe try taking the brackets away from updateOverview in the bindActionCreators parameters since it's being imported as a function? — Dream_Cap
– Dream_Cap, Commented Sep 3, 2017 at 9:52

RIYAJ KHAN · Accepted Answer · 2017-09-03 11:43:49Z

2

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.

Your Header component already knows how to create action. Considering the your Home component need ,your don't need of bindActionCreators.

The correct way to do this.

const mapDispatchToProps = dispatch => {
    return {
        callUpdateOverview: () => {
            dispatch({ updateOverview });
        }
    }
}

And in the Header render method :

this.props.updateOverview(res.data);

EDIT :

In your Home Component render method,

       const homeThis = this; //save `this` object to some variables
       ^^^^^^^^^^^^^^^^^^^^^^

       const options = {
            baseUrl: ..,
            chooseAndUpload: ..,
            uploadSuccess: function (res) {
                homeThis.props.callUpdateOverview();// call using `homeThis`          
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            }
        };

edited Sep 3, 2017 at 11:43

answered Sep 3, 2017 at 10:37

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ernst Over a year ago

With this new mapDispatchToProps I still got an error: this.props.updateOverview is not a function

RIYAJ KHAN Over a year ago

@Ernst Check the EDIT.You need to save your this object and use it to call method.

Ernst Over a year ago

I want to add that with your mapDispatchToProps function still got the same error) So I've just left the original version of mapDispatchToProps function and now it works!

Raghav Garg · Accepted Answer · 2017-09-03 10:06:35Z

0

In your code, you are calling

updateOverview(res.data);

actually which should be called like,

this.props.updateOverview(res.data);

Because, the redux will listen only to the dispatch bound actions, so to enable that, we use connect function from react-redux package, so that redux will know to update itself upon the action execution.

connect will bind your action to the component props on this.props, so it is very essential to use this.props.action() and not just action()

answered Sep 3, 2017 at 10:06

Raghav Garg

3,7072 gold badges26 silver badges33 bronze badges

4 Comments

Ernst Over a year ago

I tried 'this.props.updateOverview(res.data);' before but I've got an error: this.props.updateOverview is not a function

Raghav Garg Over a year ago

can you please console this.props inside the uploadSuccess function and share what you are getting.?

RIYAJ KHAN Over a year ago

@RaghavGarg In the options there is diff this bounded

Raghav Garg Over a year ago

@RIYAJKHAN, Yeah, I noticed that, which was because of using function keyword, and also thought of the solution you wote in your answer, but i was just confused by the error, it says not a function. but it should give the error undefined property props on 'this', thats why just wanted to confirm with OP, if he is getting something there.

Collectives™ on Stack Overflow

React/Redux dispatch function doesn't work

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related