Actions must be plain objects while using Redux

问题:

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.

回答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("[e-mail]").then((data) => {
    // optional resolved promise
})