Actions must be plain objects while using Redux - reactjs

Question

Im getting an error like
Actions must be plain objects. Use custom middleware for async actions
while using react redux. Im developing an application with a login functionality. Here is my code.
component
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Paper from 'material-ui/Paper';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import * as AuthActions from '../../actions/AuthAction';
import {blueGrey50,lightBlue500} from 'material-ui/styles/colors';
const style = {
height: 350,
width: 370,
marginLeft: 80,
marginRight: 380,
marginTop: 80,
marginBottom: 50,
textAlign: 'center',
display: 'inline-block',
backgroundColor: blueGrey50,
paddingTop: 20,
};
const style1 = {
color: lightBlue500
};
const style2 = {
margin: 12,
};
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
}
singin=()=>{
console.log('signing in');
this.props.SigninActions.signIn({email:this.state.email,password:this.state.password});
this.setState({email: '',password: '',loading:true});
console.log('done sending to actions');
}
render() {
return (
<div style={{backgroundImage: "url(" + "https://addmeskype.files.wordpress.com/2015/09/d62cb-teenagers-offlinle-online.jpg" + ")",
width:1301, height:654}}>
<Paper style={style} zDepth={2}>
<h1 style={style1}><center>Sign In</center></h1>
<TextField hintText="Email" floatingLabelText="Email" onChange={e=>{this.setState({email:e.target.value})}}/>
<TextField hintText="Password" floatingLabelText="Password" type="password" onChange={p=>{this.setState({password:p.target.value})}}/>
<br/><br/>
<RaisedButton label="Sign In" primary={true} style={style2} onTouchTap={this.singin}/>
</Paper>
{
(this.props.isError)? <span>Email or Password combination is wrong!</span> : <div>No errors</div>
}
</div>
);
}
}
Login.PropTypes = {
isError: PropTypes.bool,
SigninActions: PropTypes.object
}
const mapStateToProps = (state,ownProps) => {
return {
isError: state.isError
}
}
const mapDispatchToProps = (dispatch) => {
return {
SigninActions:bindActionCreators(AuthActions,dispatch)
};
}
export default connect(mapStateToProps,mapDispatchToProps)(Login);
Actions
import axios from 'axios';
import jwtDecode from 'jwt-decode';
import { SIGN_UP_REQUEST, SIGN_IN_REQUEST, GET_USER_DETAILS, UPDATE_USER_DETAILS } from '../constants/user';
export const getUserDetails=(email)=>{
axios.get('http://localhost:3030/user',
email
)
.then((data)=>{
console.log(data);
return ({
type: GET_USER_DETAILS,
user:data.data
});
})
.catch((error)=>{
console.log('err', error);
});
}
export const updateUserDetails=(user)=>{
axios.put('http://localhost:3030/user',
user
)
.then((data)=>{
console.log(data);
return ({
type: UPDATE_USER_DETAILS,
user:data.data
});
})
.catch((error)=>{
console.log('err', error);
});
}
Reducer
import { SIGN_UP_REQUEST, SIGN_IN_REQUEST} from '../constants/user';
const initialState = {
loading: false,
isError: false
};
export default function User(state = initialState, action) {
switch (action.type) {
case SIGN_UP_REQUEST:
return Object.assign({},state,{isError:action.data.isError});
case SIGN_IN_REQUEST:
return Object.assign({},state,{isError:action.data.isError});
default:
return state;
}
}
Rootreducer
import { combineReducers } from 'redux';
import ChatReducer from './ChatReducer';
import UserReducer from './UserReducer';
export default combineReducers({
chat: ChatReducer,
user: UserReducer
})
Store
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import RootReducer from '../reducers/RootReducer';
export default() => {
return createStore(RootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
}
The browser displays the error as
How to overcome this issue?. im quite new to redux.

Answer 1

Vanilla redux only handles plain object actions such as
{ type: SOME_ACTION, ...parameters }
returned synchronously.
You need to look into using middleware like redux-thunk if you want to return Promises or, really, anything other than a plain object from your action creators (or, in this case, handle asynchronous actions).
see this: How to dispatch a Redux action with a timeout?
edit:
The problem is kind of two fold:
first:
export const getUserDetails = (email) => {
axios.put('http://localhost:3030/user', user) .then((data) => {
return {
type: UPDATE_USER_DETAILS,
user:data.data
};
});
});
you're returning an action inside the promise (axios.put) but you're not returning the promise - javascript doesn't work how you're intending it to work. return, in this case, is limited to the nearest parent scope; in this case the promise body. Just given what you have currently, the return type of the getUserDetails action creator is undefined.
// this is still technically *wrong*, see below
export const getUserDetails = (email) => {
// notice the return on the next line
return axios.put('http://localhost:3030/user', user) .then((data) => {
return {
type: UPDATE_USER_DETAILS,
user:data.data
};
});
});
returns a Promise<Action> which still doesn't really solve your problem.
second:
When working with redux-thunk, you wrap your action in a function like
export const getUserDetails = (email) => {
return (dispatch) => {
return axios.put('http://localhost:3030/user', user) .then((data) => {
// this is where the action is fired
dispatch({
type: UPDATE_USER_DETAILS,
user:data.data
});
// if you want to access the result of this API call, you can return here
// the returned promise will resolve to whatever you return here
return data;
});
}
});
when you bind the action creator, it will "unwrap" the creator while keeping the method signature - you use it like you would normally
this.props.getUserDetails("email#domain.com").then((data) => {
// optional resolved promise
})