Error: Actions must be plain objects. Use custom middleware for async actions.- Even the actions contain the method

Question

i am new to react , just understanding the concept on redux without using redux thunk. please see the below code

// app.js

import React, { Component } from 'react';
import {connect} from 'react-redux';
import * as actions from './actions'

class App extends Component {
  render() {
    return (
      <div>
        <button onClick={this.props.fetchData}>Show Data</button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {

  }
}


const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(actions.fetchDataHandler)
  }
}



export default connect(mapStateToProps, mapDispatchToProps)(App);


// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {createStore} from 'redux';
import Data from './reducers';
import {Provider} from 'react-redux';

const store = createStore(Data)

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();


//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
}

//reducers-index.js

// default state
const defaultState = {
    data: null
}

let data;

export default data = (state=defaultState, action) => {
    switch(action.type){
        case "FETCH_DATA": 
            return {
                ...state,
                data: action.payload
            }
        default:
            return{
                ...state
            }
    }
}

folder structure is

src 
  actions
    index.js
  reducers
    index.js
  app.js

i am not using redux thunk, when the button is clicked it will call the fetchData which will invoke the actions.fetchDataHandler

so on the console it should get a message as "hit here", but its not working.

sorry if i am not understanding the redux concept properly.

Shubham Khatri · Accepted Answer · 2018-07-17 07:50:51Z

1

In a normal redux flow, Actions are supposed to be plain object, i.e an action creator must return a plain object, But in your case since you haven't need using any middleware like redux-thunk, you can not write an action like

//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
}

A general way to do it would be

export const fetchDataHandler = e => {
    console.log("hit here");
    return {
        type: 'MY_ACTION'
    }
}

However if you configure a middleware like redux-thunk, you can have an asynchronous action within your action creators like

//actions-index.js

export const fetchDataHandler = e => dispatch => {
    console.log("hit here");
    API.call().then((res) => {
        dispatch({ type: 'API_SUCCESS', payload: res });
    });
}

Also your mapDispatchToProps isn't calling the action in dispatch, you would either write it like

const mapDispatchToProps = dispatch => {
  return {
    fetchData: () => dispatch(actions.fetchDataHandler())
  }
}

or

const mapDispatchToProps = {
    fetchData: actions.fetchDataHandler
}

edited Jul 17, 2018 at 7:50

answered Jul 17, 2018 at 7:36

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

3 Comments

Beginner Over a year ago

i have changed the code export const fetchDataHandler = e => { console.log("hit here") return {} } but its showing an error in app.js (Error: Actions must be plain objects. Use custom middleware for async actions.) const mapDispatchToProps = dispatch => { return { fetchData: () => dispatch(actions.fetchDataHandler) } }

Shubham Khatri Over a year ago

You would write it like const mapDispatchToProps = dispatch => { return { fetchData: () => dispatch(actions.fetchDataHandler()) } } or simply const mapDispatchToProps = { fetchData: actions.fetchDataHandler }

Beginner Over a year ago

thanks , i have a few questions on this. May be i am new to this. like redux thunk is used to have async calls in action creators isn't

Collectives™ on Stack Overflow

Error: Actions must be plain objects. Use custom middleware for async actions.- Even the actions contain the method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related