When using Redux, actions must be regular objects
I am getting the error Actions must be simple objects. Use custom asynchronous middleware when using react reduction. I'm developing an app with a login feature. 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
})
Score
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 problem? im completely new to redux.
source to share
Vanilla redux only handles normal object actions like
{ type: SOME_ACTION, ...parameters }
returns synchronously.
You need to look into using middleware like redux-thunk if you want to return Promises, or really anything other than a simple 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 twofold:
first:
export const getUserDetails = (email) => {
axios.put('http://localhost:3030/user', user) .then((data) => {
return {
type: UPDATE_USER_DETAILS,
user:data.data
};
});
});
you are returning an action inside a promise ( axios.put
), but you are not returning a promise - the javascript is not working, how are you going to do it. return
, in this case, is limited to the nearest parent area; in this case the body is promised. With just what you have, the return type of the action creator getUserDetails
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 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 creator of the action, it "expands" the creator, keeping the method signature, you use it as usual,
this.props.getUserDetails("email@domain.com").then((data) => {
// optional resolved promise
})
source to share