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

Question

Im absolutely a beginner in React Native, Redux, and friends.
Now I try to create an app with React Native and Redux.
In the process I found this error :

I try to use Redux in my app like this :

export const confirmRegister = (userdata) => {
    return (dispatch) => {
        return(
            fetch(URI + path, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                    'x-application-id' : AppId,
                    'hashing' : this.generateHashing(userdata)
                },
                body: userdata,
            })
            .then((response) => {
                return response.json()
            })
            .then((response)=>{
                dispatch(setDataAfterRegister(response.result))
            })
            .catch(error => {alert(error)})
        )
      };
    };

    export function setDataAfterRegister(data){
      return{
        type:'REGISTERED',
        name:data.name,
        token:data.access_token
      }
    }

I'm still learning how to use Redux.
Any helps will be really appreciated.

Here's my store:

import { createStore } from 'redux';
import rootReducer from './reducers';
 
let store = createStore(rootReducer);
 
export default store;

have you setup redux-thunk?

Tomasz Mularczyk
– Tomasz Mularczyk

2018-06-03 08:41:44 +00:00
Commented Jun 3, 2018 at 8:41 — Tomasz Mularczyk
– Tomasz Mularczyk, Commented Jun 3, 2018 at 8:41
no, I don't have redux-thunk in my app

kurniawan26
– kurniawan26

2018-06-03 08:42:29 +00:00
Commented Jun 3, 2018 at 8:42 — kurniawan26
– kurniawan26, Commented Jun 3, 2018 at 8:42
show how you create your redux store.

Tomasz Mularczyk
– Tomasz Mularczyk

2018-06-03 08:43:15 +00:00
Commented Jun 3, 2018 at 8:43 — Tomasz Mularczyk
– Tomasz Mularczyk, Commented Jun 3, 2018 at 8:43

Tomasz Mularczyk · Accepted Answer · 2018-06-03 08:45:31Z

11

confirmRegister function returns a function:

export const confirmRegister = (userdata) => {
  return (dispatch) => {

Redux don't know how to handle it natively. You need a middleware to do that. Most popular middleware that will let you return a function from your action creators is a redux-thunk.

First install it:

npm install --save redux-thunk

and then set up middleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

answered Jun 3, 2018 at 8:45

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

6 Comments

kurniawan26 Over a year ago

Thank you so much, you saved me :D... one more, how do I catch the updated state ?

Tomasz Mularczyk Over a year ago

@kurniawan26 No problem. If you want to access current state use react-redux and connect

kurniawan26 Over a year ago

it works, now I want to navigate to home screen after the states updated, I got this warning when Im on the home screen : Warning:Cannot update during an existing state transition any idea ?

Tomasz Mularczyk Over a year ago

@kurniawan26 you probably try to update unmounted component.

kurniawan26 Over a year ago

sorry, I dont get your point sir.. is this something I really need to fix ? or I can just ignore the warning ?

|

Tarik Sahni · Accepted Answer · 2018-06-03 11:10:15Z

0

Your Action creator confirmRegister returns a function, But in React action creator returns a action that is a plain JS Object.

So you need some middleware to tell react about this asynchronous call. You can use Redux-thunk , redux-Sagas and other middlewares. This will let your action creator return a function and that function on getting response will dispatch a new action object.

You can install the middlerware using npm or yarn

npm install --save redux-thunk
yarn add redux-thunk

Add that to your store config file.

And for that Warning:Cannot update during an existing state transition you have to setState of a component either in ComponentWillReceiveProps or ComponentWillMount. You are probably setting the state in render method. `

answered Jun 3, 2018 at 11:10

Tarik Sahni

1681 gold badge2 silver badges13 bronze badges

3 Comments

kurniawan26 Over a year ago

where should I call ComponentWillReceiveProps ? is it on my current screen or on the screen that I want to navigate to ?

Tarik Sahni Over a year ago

The Current Screen from which you want navigation to happen

kurniawan26 Over a year ago

woaaaaaahhhh... thank you so much.. the warning dissapear.. I wish you have a good day sir

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related