アクションは普通のオブジェクトである必要があります。

Question

のようなエラーが発生しましたアクションはプレーンなオブジェクトでなければなりません。 react reduxを使用している間は、非同期アクションのカスタムミドルウェアを使用して を使用します。私はログイン機能を持つアプリケーションを開発しています。ここに私のコードです。

成分

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); 

アクション

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); 
     }); 
} 

減速

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 
}) 

ストア

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__()); 
} 

のブラウザでは、この問題を克服するためにどのように

としてエラーが表示されます？。私はかなり新しいです。

Answer 1

バニラreduxが唯一の同期返さな

{ type: SOME_ACTION, ...parameters }

としてプレーンなオブジェクトのアクションを処理します。

約束を返すか、実際にはアクションクリエータからプレーンオブジェクト以外のもの（この場合は非同期アクションを処理する）を返す場合は、redux-thunkのようなミドルウェアを使用する必要があります。

は、この参照してください。How to dispatch a Redux action with a timeout?

編集：

最初：

問題は2倍の一種である、あなたは戻っている

export const getUserDetails = (email) => { 
    axios.put('http://localhost:3030/user', user) .then((data) => { 
     return { 
      type: UPDATE_USER_DETAILS, 
      user:data.data 
     }; 
    }); 
}); 

プロの行動mise（axios.put）しかし、あなたは約束を返すわけではありません.Javascriptは、あなたがそれをどのように動作させようとしているのか動作しません。この場合、returnは最も近い親スコープに限定されます。この場合、約束の体。あなたが現在持っているものを与えられただけで、undefinedのgetUserDetailsアクションクリエイターの戻り値のタイプが返されます。

// 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 
     }; 
    }); 
}); 

返信するPromise<Action>まだあなたの問題を本当に解決しません。

秒：Reduxの-サンクで作業する場合 、あなたは、アクションの作成者をバインドするとき、メソッドのシグネチャを維持しながら、それは創作者を「アンラップ」されます

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; 
     }); 
    } 
}); 

のような機能で、あなたの行動を包みます - あなたは通常と同じように使用します。

this.props.getUserDetails("email@domain.com").then((data) => { 
    // optional resolved promise 
})