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

Question

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

authActions.js

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

使用 connect 和 props 从 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);

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

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

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