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

Posted 2023-02-22

【中文标题】动作必须是普通对象。使用自定义中间件

【英文标题】：Actions must be plain object. Use custom middleware

【发布时间】：2019-03-18 21:00:12

【问题描述】：

我正在使用 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

【问题讨论】：

在dispatch(type:'auth_user')之后添加return 。

还是同样的错误。没有工作:(

尝试合并redux-thunk

当您没有在商店中将 redux-thunk 添加为 middleware 时，也会发生这种情况。尝试添加它。

能否分享完整代码。您分享的链接不是最新的

【参考方案1】：

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;
  

【讨论】：

如果您仍然遇到问题，这里有一个工作示例：codesandbox.io/s/yqo75n896x

@mattcarlotta 你能帮我解决这个问题吗***.com/questions/53265169/…

【参考方案2】：

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

当然：

应用 redux-thunk 中间件 在

Register.js

中导入 register() 操作 使用 react-redux 将

Register

组件连接到

Redux

商店 connect()

编辑：

如果这个简化的代码（没有mapDispatchToProps）不起作用，那么您的问题有问题。 也许您的操作有效负载包含一些不是普通对象的东西？例如。 axios返回的promise？

根据您的问题，代码沙箱似乎一切正常： https://codesandbox.io/s/j2mny6rvnv

【参考方案3】：

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

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

你应该像这样声明你的连接

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

而不是（如果我没记错的话）

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

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

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

【讨论】：

嗨 Tatsu，我编辑了问题并添加了使用 Connect 的部分。请你看一下。

把这个import * as actions from '../actions/authActions';改成import register from '../actions/authActions';再把这个var Register = connect(mapStateToProps,actions)(RegisterForm);改成var Register = connect(mapStateToProps, register )(RegisterForm);我们先试试这个，看看能不能用

我也尝试使用 registerAction 名称。它没有工作

【参考方案4】：

您正在使用来自mapDispatchToProps的注册：

this.props.register();

但这只是：

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

所以，调用 register 是行不通的，因为它在行动中，actions.register:

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

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