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

Question

未处理的拒绝（错误）：操作必须是普通对象。 使用自定义中间件进行异步操作。

我想在每个帖子中添加评论。 因此，当运行获取帖子时，我想为所有帖子调用获取评论 API。

export function bindComments(postId) {
  return API.fetchComments(postId).then(comments => {
    return {
      type: BIND_COMMENTS,
      comments,
      postId
    }
  })
}

Answer 1

您必须在异步请求结束后进行调度。

这会起作用：

export function bindComments(postId) {
    return function(dispatch) {
        return API.fetchComments(postId).then(comments => {
            // dispatch
            dispatch({
                type: BIND_COMMENTS,
                comments,
                postId
            });
        });
    };
}

Answer 2

对于像我这样可能放弃简单细节的未来寻求者，在我的情况下，我只是忘记用括号调用我的动作函数。

动作.js：

export function addNewComponent() {
  return {
    type: ADD_NEW_COMPONENT,
  };
}

myComponent.js：

import React, { useEffect } from 'react';
import { addNewComponent } from '../../redux/actions';

  useEffect(() => {
    dispatch(refreshAllComponents); // <= Here was what I've missed.
  }, []);

我忘记用()调度动作函数了。 所以这样做解决了我的问题。

  useEffect(() => {
    dispatch(refreshAllComponents());
  }, []);

同样，这可能与 OP 的问题无关，但我希望我能帮助与我有同样问题的人。

Answer 3

该错误只是要求您在中间插入一个中间件，这将有助于处理异步操作。

你可以这样做：

npm 我 redux-thunk

        Inside index.js

import thunk from "redux-thunk" 
        
...createStore(rootReducers, applyMiddleware(thunk));

现在，异步操作将在您的函数中工作。

Answer 4

没有中间件，您不能在操作中使用 fetch。 动作必须是普通对象。 您可以使用 redux-thunk 或 redux-saga 之类的中间件来执行 fetch 然后分派另一个操作。

这是使用 redux-thunk 中间件的异步操作示例。

export function checkUserLoggedIn (authCode) {
 let url = `${loginUrl}validate?auth_code=${authCode}`;
  return dispatch => {
    return fetch(url,{
      method: 'GET',
      headers: {
        "Content-Type": "application/json"
      }
      }
    )
      .then((resp) => {
        let json = resp.json();
       if (resp.status >= 200 && resp.status < 300) {
          return json;
        } else {
          return json.then(Promise.reject.bind(Promise));
        }
      })
      .then(
        json => {
          if (json.result && (json.result.status === 'error')) {
            dispatch(errorOccurred(json.result));
            dispatch(logOut());
          }
          else{
            dispatch(verified(json.result));
          }
        }
      )
      .catch((error) => {
        dispatch(warningOccurred(error, url));
      })
  }
}

Answer 5

利用箭头函数提高代码的可读性。 无需在API.fetchComments返回任何API.fetchComments ，当请求完成时，Api 调用是异步的， then将获得响应，您只需dispatch类型和数据。

下面的代码通过使用箭头函数来完成同样的工作。

export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};

Answer 6

改变：

export const <youractionName> = async (dispatch) => {}

到，

export const <youractionName> = () => async (dispatch) => {}

这解决了我的问题。 错过了 '() =>'

Answer 7

我遇到了同样的问题，因为我错过了添加 composeEnhancers。 设置完成后，您可以查看动作创建器。 当这也没有设置时，您会收到此错误。

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

Answer 8

我已经解决了我的问题：

export const = async (dispatch) => {}

至，

export const = () => async (dispatch) => {}

Answer 9

动作定义

const selectSlice = () => {
  return {
    type: 'SELECT_SLICE'
  }
};

行动派

store.dispatch({
  type:'SELECT_SLICE'
});

确保定义的动作的对象结构与分派的动作相同。 就我而言，在调度操作时， type 未分配给属性type 。

Answer 10

如果您正在使用 redux-observable，请检查您的操作是否返回了一个 observable。 我遇到了这个问题，因为我使用了地图而不是合并地图

// error
    export const myEpic = (action$: any) =>
      action$.pipe(
        ofType('...'),
        map((x => x.payload),
        map((x) => callAPi(x)),
      )
    
// success
        export const myEpic = (action$: any) =>
          action$.pipe(
            ofType('...'),
            map((x => x.payload),
            mergeMap((x) => callAPi(x)),
          )

Answer 11

使用 redux-thunk，使用 redux 进行设置并创建这样的操作

 export const actionName = (data) => dispatch => { dispatch({ type:"ACTION_TYPE" payload:"my payload" }) }

Answer 12

只是在这里分享我的案例。 我有一个setLoading动作，同时也有

const [loading, setLoading] = useState(false)

以上我没有删除。 所以它基本上不是从 redux 分派setLoading ，而是从 useState 分派 setLoading。 删除/重命名它可以解决问题。

Answer 13

如果使用此代码进行操作并且这是一个新的迭代，请检查以确保您的变量顺序正确（这是我的错误）

即出现此错误的代码

export const fetchProjects = newPage => (getState, dispatch) => NOPE

export const fetchProjects = newPage => (dispatch, getState) => OK YEAH

Answer 14

就我而言，我只是想将一些值发送到服务器而不将它们保存到 redux 存储中，所以我没有使用类型，也没有在最后分派任何东西。 但我是用调度来调用这个动作的。 所以我所要做的就是删除调度，因为它不是一个真正的动作。 这只是一个函数。

Answer 15

您可能也忘记了在中间件的数组中使用 getDefaultMiddleware() ，就像我所做的那样。 无需进一步安装：

export const store = configureStore({
  reducer: GlobalReducer,
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware(),
    mainMiddleware,
  ],
});

Answer 16

对我来说，解决方案是添加redux-thunk作为中间件，所以在我的商店配置文件中，我将 redux-thunk 作为中间件传递。

控制台内：

import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
  {},
  compose(applyMiddleware(...middlewares)),
);
export default store;

Answer 17

箭头函数语法

export const bindComments = (postId) => dispatch => {
 return API.fetchComments(postId).then(comments => {
   // dispatch
    dispatch({
      type: BIND_COMMENTS,
       comments,
       postId
   })
})}

Answer 18

此错误主要发生在您正在调度操作并且您的操作未返回对象时。 例如，这里是一个增量函数，当单击增量按钮时，我用它来增加数值。 const increment = () => type: INCREMENT这是我的调度函数onClick={() => dispatch(increment)}因为现在在终端中的调度函数中省略括号()会出现相同的错误。 原因调度函数需要一个对象而不是函数名......

Answer 19

当您在动作创建器中进行异步api 调用时会发生此错误，您需要将动作创建器从同步动作创建器转换为异步动作，如果我们使用中间件，这种转换是可能的，所以让我详细解释一下没有中间件的 Redux

两种类型的动作创建者同步动作创建者 VS 异步动作创建者。 您需要将同步操作更改为异步操作以消除此错误，这可以通过中间件完成

带有中间件的 Redux在此处输入图像描述

所以现在的解决方案是：在异步请求完成后调度。

export function bindComments(postId) {
        return function(dispatch) {
            return API.fetchComments(postId).then(comments => {
                // dispatch
                dispatch({
                    type: BIND_COMMENTS,
                    comments,
                    postId
                });
            });
        };
    }  

Answer 20

没有中间件，redux 只支持同步数据流。 如果您需要发出 ajax 请求并分派此请求的结果，那么您需要使用处理异步操作的中间件，例如redux-promise 、 redux-thunk或redux-saga 。 或者您可以编写自己的中间件：

export default ({ dispatch }) =>
  (next) =>
  (action) => {
    // check if there is payload in  action. if not send it to the next middleware
    if (!action.payload || !action.payload.then) {
      return next.action;
    }
    // if we are here means we have action.payload. now check if it is promise
    // wait for the promise to be resolved
    action.payload.then(function (response) {
      // overwrite the action
      const newAction = { ...action, payload: response };
      dispatch(newAction);
    });
  };

Answer 21

每当您希望使用 redux 支持执行async操作时，您必须使用中间件 ex。 redux-thunk

错误：

动作.js

export const login = () => async (dispatch, getState) => {}

疼痛.js

import reducerData from './store-reducer';
import {createStore} from 'redux';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
);
export default store;

解决方案：

import reducerData from './store-reducer';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';

const middlewares = [ReduxThunk];

const store = createStore(
  reducerData,
  compose(applyMiddleware(...middlewares)),
);
export default store;

Answer 22

这个错误的一个原因让我措手不及——

即使动作创建者是同步的，调度在测试中也失败了。 原来我在嘲笑动作创建者，这是它因此而没有返回时给出的错误。