Question

我正在使用Redux，具有React的redux-thunk。我正在返回一个对象，但仍然出现错误。

authActions.js

export function register(){
return (dispatch)=>{
    console.log("in register action");
    dispatch({type:'auth_user'})
}
}

使用连接和道具从 Register.js 调用此操作

import  * as actions  from '../actions/authActions';

class RegisterForm extends React.Component{

handleRegister = (e)=>{
    e.preventDefault();
    console.log("inside handle register");
    console.log(this.props);
    this.props.register();
 }
}
var Register = connect(mapStateToProps,actions)(RegisterForm);

错误是

动作必须是普通对象。使用自定义中间件执行异步操作。

编辑1

像下面这样实现了redux-thunk。

import thunk from 'redux-thunk';


const store = createStore(authReducer,applyMiddleware(
                        thunk, 
                        loggerMiddleware
                        ),window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());


ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>, 
document.getElementById('root'));

可以使用链接在github上找到代码 https://github.com/abhikulshrestha22/social-network/tree/master/client

Answer 1

您正在使用mapDispatchToProps中的注册：

this.props.register();

但这只是：

var Register = connect(mapStateToProps,actions)(RegisterForm);

因此，调用寄存器将不起作用，因为它正在起作用，actions.register：

var Register = connect(mapStateToProps,{register: actions.register})(RegisterForm);

现在，它应该可以解决您的问题。

Answer 2

actions / index.js

// with thunk
export const register = () => dispatch => (
   dispatch({ type: 'auth_user' })
)

// without thunk
export const register = () => ({ type: 'auth_user' })

component / example.js

import React from 'react';
import { connect } from 'react-redux';
import { register } from '../actions';

const Example = ({ register }) => (
   <button onClick={register}>Register</button>
)

export default connect(null, { register })(Example);

reducers / index.js

const authReducer = (state=false, {type, payload}) => {
  switch(type) {
    case 'auth_user': return !state;
    default: return state;
  }
}

Answer 3

handleRegister = (e) => {
  ...
  this.props.dispatch(register());
}

当然：

应用 redux-thunk 中间件
在 Register.js 中导入register()操作
使用 react-redux connect()

Register

Redux

编辑：

如果此简化代码（无mapDispatchToProps）不起作用，则您的问题出了点问题。也许您的动作有效载荷包含的不是普通对象？例如。答应axios返回的？

根据您的问题的代码沙盒，一切似乎都可以正常工作： https://codesandbox.io/s/j2mny6rvnv

Answer 4

上面显示的当前设置没有问题。

我认为您的mapDispatchToProps可能是此问题的根本原因。

您应该这样声明连接

export default connect(
  null,
  { register }
)(Register);

代替（如果我没记错的话）

const mapDispatchToProps = dispatch => {
  return {
    register: () => {
      dispatch(register());
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Register);

那是我的猜测。希望对您有帮助。

动作必须是普通对象。使用自定义中间件

4 个答案: