动作必须是普通对象.使用自定义中间件 [英] Actions must be plain object. Use custom middleware

问题描述

我正在使用 Redux、redux-thunk 和 react.我正在返回一个对象，但仍然收到错误.

I am using Redux,redux-thunk with react. I am returning an object but still getting the error.

authActions.js

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

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

calling this action from Register.js using connect and props

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.

Implemented redux-thunk like below.

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

推荐答案

您正在使用 mapDispatchToProps 中的注册:

You're using register from mapDispatchToProps:

this.props.register();

但这只是:

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

因此，调用 register 不起作用，因为它在操作中，actions.register:

So, calling register wouldn't work because it's in actions, actions.register:

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

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

Now, it should fix your issue.

这篇关于动作必须是普通对象.使用自定义中间件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！