Actions must be plain objects while using Redux

Viewed 1625

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 enter image description here

How to overcome this issue?. im quite new to redux.

1 Answers
Related