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

浏览器显示错误为

如何克服这个问题？我对redux很新。

Answer 1

Vanilla redux仅处理普通对象操作，例如

{ type: SOME_ACTION, ...parameters }

同步返回。

如果你想要从你的动作创建者（或者，在这种情况下，处理异步动作）中返回Promises，或者实际上除了普通对象以外的任何东西，你需要考虑使用像redux-thunk这样的中间件。

请参阅：How to dispatch a Redux action with a timeout?

编辑：

问题有两点：

首先：

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

您在承诺（axios.put）中返回了一个操作，但您没有返回承诺 - javascript并不会影响您的工作方式。在这种情况下，return仅限于最近的父范围;在这种情况下，承诺机构。只要给出您目前拥有的内容，getUserDetails操作创建者的返回类型为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 }; }); });

返回Promise<Action>，但仍然无法解决您的问题。

<强>第二使用redux-thunk时，可以将操作包装在像
这样的函数中
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; }); } });

当您绑定动作创建者时，它将＆＃34;展开＆＃34;保持方法签名的创建者 - 你可以像平常一样使用它

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

使用Redux

1 个答案: