Question

在进行调用调用并在React Redux中通过connect函数发送一些值时，我收到以下错误。

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.

我看到了几个有关此错误的问题，但没有一个问题与我的案子以及我理解问题的能力足够接近。我读过有关在某些情况下使用“ thunk”的信息，但在另一些情况下，人们将此错误称为在redux中未正确设置的错误，因此我不确定确切的情况是什么。

这是在Chat.js类中进行的提取调用：

async sendAtStart() {
 var msg;
    await fetch(
      '*********',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',

        },
        body: JSON.stringify({ inputText: 'hello' })
      }
    )
      .then(r => r.json())
      .then(r => {
        msg = r.msg;


      });

    this.props.addMessage(msg);
  }

这是Chat.js末尾的connect函数：

const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

这是商店：

import { createStore } from 'redux';
import MessageReducer from './reducers/MessageReducer';
function configureStore(state = { text: '', key: '' }) {
  return createStore(MessageReducer, state);
}
export default configureStore;

动作：

export function addMessage(text) {
  return { type: 'addMessage', text };
}

减速器：

export default (state, action) => {
  switch (action.type) {
    case 'addMessage':
      return {
        text: action.text
      };
    default:
      return state;
  }
};

我的问题到底在哪里？

Answer 1

const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

在这里您忘记了在别名中设置参数，它应该是：

 const mapDispatchToProps = dispatch => ({
   addMessage: (msg) => dispatch(addMessage(msg))
 });

Answer 2

如果没有像redux-saga或redux-thunk这样的中间件，就无法轻松地执行异步操作。我的建议是将redux-saga用于异步操作，例如提取。

React Redux中的错误：未处理的拒绝（错误）：动作必须是普通对象

2 个答案: