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

Posted

技术标签:

【中文标题】React Redux - 动作必须是普通对象。使用自定义中间件进行异步操作【英文标题】:React Redux - Actions must be plain objects. Use custom middleware for async actions 【发布时间】:2018-01-31 05:17:35 【问题描述】:

我尝试在我的学习 react,redux 项目中使用 axom 处理 ajax 数据,但我不知道如何调度一个动作并在组件内设置状态

在组件中会挂载

componentWillMount()
  this.props.actions.addPerson();

商店

import  createStore, applyMiddleware  from "redux";
import rootReducer from "../reducers";
import thunk from "redux-thunk";

export default function configureStore() 
  return createStore(rootReducer, applyMiddleware(thunk));

在行动:

import * as types from "./action-types";
import axios from "axios";
export const addPerson = person => 
  var response = [];

  axios
    .get(`&&&&&&&&&&&`)
    .then(res => 
      response = res.data;

      return 
        type: types.ADD_PERSON,
        response
      ;
    );
;

在减速器中

import * as types from "../actions/action-types";

export default (state = [], action) => 
  console.log("action======>", action);
  switch (action.type) 
    case types.ADD_PERSON:
      console.log("here in action", action);
      return [...state, action.person];
    default:
      return state;
  
;

我得到的 Actions 必须是普通对象。使用自定义中间件进行异步操作。

【问题讨论】:

【参考方案1】:

您应该为异步功能使用调度。看看 redux-thunk 的文档:https://github.com/gaearon/redux-thunk

在行动:

import * as types from "./action-types";
import axios from "axios";

export const startAddPerson = person => 
  return (dispatch) => 
    return axios
      .get(`https://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
      .then(res => 
        dispatch(addPersons(res.data));
      );
  
;

export const addPersons = personList => 
  return 
    type: types.ADD_PERSON,
    personList
  ;

在 PersonComponent 中:

class Person extends Component 
  constructor(props) 
    super(props);
  
  componentWillMount() 
    this.props.dispatch(startAddPerson())
  

  render() 
    return (
      <div>
      <h1>Person List</h1>
      </div>
    );
  


export default Redux.connect()(Person);

【讨论】:

【参考方案2】:

您需要在这里执行两个操作:postPersonaddPerson

postPerson 将执行 API 请求,addPerson 将更新存储:

const addPerson = person => 
    return 
        type: types.ADD_PERSON,
        person,
    


const postPerson = () => 
   return (dispatch, getState) => 
       return axios.get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
                   .then(res => dispatch(addPerson(res.data)))
   

在您的组件中,调用postPerson()

【讨论】:

【参考方案3】:

您使用 redux-thunk 库,它可以让您访问“getState”和“dispatch”方法。我看到晨曦已经在你的问题中添加了这一点。首先在您的操作中运行您的异步操作,然后使用您的简单操作操作创建器调用“dispatch”,这将返回 redux 正在寻找的简单对象。

这是您的异步​​动作创建者和简单动作创建者(分为两个动作创建者)的样子:

export const addPersonAsync = (person) => 
  return (dispatch) => 
    var response = [];

    axios
      .get(`http://599be4213a19ba0011949c7b.mockapi.io/cart/Cart`)
      .then(res => 
        response = res.data;

        dispatch(addPerson(response));
      );
  ;
;


export const addPerson = (response) => (
  type: types.ADD_PERSON,
  response
);

现在,您将在您的组件中调用“addPersonAsync”操作创建者。

【讨论】:

以上是关于React Redux - 动作必须是普通对象。使用自定义中间件进行异步操作的主要内容,如果未能解决你的问题,请参考以下文章

如何修复'动作必须是普通对象。使用自定义中间件进行异步操作。

动作必须是普通对象。 Redux 不工作

动作必须是普通对象。将自定义中间件用于测试库而不是应用程序上的异步操作

Redux thunk - 错误 · 动作必须是普通对象。使用自定义中间件进行异步操作,即使调度具有键类型的对象

redux-thunk:错误:动作必须是普通对象。使用自定义中间件进行异步操作

Redux 错误操作必须是普通对象。使用自定义中间件进行异步操作