React Native & Redux - Error: Actions must be plain objects. Use custom middleware for async actions

Question

I'm trying to build a react-native app with Redux and I am getting the following error stemming from my Actions file:

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

Anyone understand what's going on here? Here is the relevant code:

import axios from 'axios' //http client
import {API_URL} from '../utils/constants'

export const FETCH_USER = 'fetch_user'

export const editProfileUser = async (email, password, name, location, aboutMe, memberSince, 
   picture) => {
 try{
 const response = await axios({
 method: 'POST',
 url: `${API_URL}/api/get_token`,
 data: {
  email,
  password
 }
 })
 const {token} = response.data
 const userResponse = await axios({
  method: 'POST',
  url: `${API_URL}/api/edit_user_profile`,
  headers: {
    Authorization: `${token}`
  },
  data: {
    name,
    location,
    aboutMe,
    memberSince,
    picture
  }
})

console.log("userResponse.data", userResponse.data)

return (
  {
    type: FETCH_USER,
    payload: {
      token,
      email,
      password
    }
  }
)


} catch(err){
console.log("Exception in actions/user/editProfileUser err", err)
}
}

rulogaf rulogaf · Accepted Answer · 2019-10-23T19:27:46

Looks like you are trying to make an async action which is not part of Redux you either need to handle the fetch your request outside or use an async redux library like redux-observable or redux-saga

What you can do is call your action once the promise has finished:

axios({
      method: 'POST',
      url: `${API_URL}/api/edit_user_profile`,
      headers: {
        Authorization: `${token}`
      },
      data: {
        name,
        location,
        aboutMe,
        memberSince,
        picture
      }
    }).then(({token, email, password}) => {
     // Dispatch your action with the values you want to store
     dispatch(editProfileUser(token, email, password))
})

From redux docs:

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.

Actions are only responsible to send data, not retrieving it

React Native & Redux - Error: Actions must be plain objects. Use custom middleware for async actions

1 Answers