Redux Actions must be plain objects. Use custom middleware for async actions

Question

The code is:

Test component:

import {add} from './../actions/';

class Test extends Component{

    _add = (){
       this.props.add(1);
    }

    render(){
        <button onClick={this._add}>add</button>  
    }

}

const mapStateToProps = ()=>({
    haha:'haha'
});

export default connect(
    mapStateToProps,
    {add}
)(Test)

Actions:

export const add = value => (dispatch) =>{
    dispatch({
        type:'ADD',
        value:value
    })
}

I click add button there has this error!

What's the issue?

I looked createStore.js and console.log(action). It shows a function.

But Redux's example is not a function. My code is almost the same.

Lucas Katayama · Accepted Answer · 2016-11-24 09:36:12Z

2

If you use redux-thunk as a middleware, it will process dispatched function actions....

Another one is redux-promise which will do somethink like the thunk ... but with promises

UPDATE:

This is a model to handle async

export const add = value => (dispatch) => {
   ... do something async
}

LIke this:

export const add = value => (dispatch) => {
   http.get('/path')
       .then(json => 
           dispatch({type: 'RESULT', payload: json}));
}

You action does not have async calls so it could be written like this:

export const add = value => ({
    type:'ADD',
    value:value
})

edited Nov 24, 2016 at 9:36

answered Nov 24, 2016 at 9:07

Lucas Katayama

4,61030 silver badges35 bronze badges

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

6 Comments

mqliutie Over a year ago

I did not use both redux-thunk and redux-promise.

Lucas Katayama Over a year ago

And that's why redux is complaining.. to use async actions ... you need redx-thunk middleware

mqliutie Over a year ago

But I don't know where I have run async actions? I don't use setTimeout and there is no AJAX request

Lucas Katayama Over a year ago

You don't... but the way you write the action... is used to solve async process...look my update

mqliutie Over a year ago

Is the reason closure? I notice it is a closure. Returns an anonymous function

|

Davin Tryon · Accepted Answer · 2016-11-24 08:43:14Z

2

You are simply missing the arrows => in your arrow function:

export const add = value => (dispatch) => {
    dispatch({
        type:'ADD',
        value:value
    })
}

answered Nov 24, 2016 at 8:43

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

3 Comments

mqliutie Over a year ago

Sorry, I didn't copy directly, I had made a mistake. Actually, the code is =>

Davin Tryon Over a year ago

You are still missing an arrow. And for this to work you need redux-thunk middleware.

mqliutie Over a year ago

Thanks ~ Let me try

Yanis Vieilly · Accepted Answer · 2016-11-24 09:01:47Z

0

You should write your action creator like this:

export const add = value =>
  ({
    type: 'ADD',
    value: value
  });

The way you connect your action creator to your component (passing it with the shortcut notation { add } as a second parameter to connect) allows you to omit the dispatch since connect will automatically wrap your action creator into a dispatch call when called this way.

edited Nov 24, 2016 at 9:01

answered Nov 24, 2016 at 8:55

Yanis Vieilly

8576 silver badges11 bronze badges

1 Comment

mqliutie Over a year ago

Sorry, I didn't copy directly, I had made a mistake. Actually, the code is =>

Collectives™ on Stack Overflow

Redux Actions must be plain objects. Use custom middleware for async actions

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related