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

我正在制作一个React redux组件以嵌入到Laravel刀片文件中。在反应方面

我使用的是带有thunk的redux，当我尝试在没有thunk的情况下从Laravel路线获取数据时，它会正常运行

但是当我在action creator中使用axios请求异步获取数据时。它给出了：

'未捕获错误：操作必须是普通对象。将自定义中间件用于异步操作。”

这是反应侧的入口组件

Entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import reducer from '../store/reducers/reducer';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import thunk from "redux-thunk";


const store = createStore(reducer, applyMiddleware(thunk)
+window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
// console.log(getState());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('like_post'));

也尝试了此操作，但仍然存在相同的错误

export const getCurrentPostLikes = () => {
  return dispatch => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
  }
}

这是/store/reducers/reducer.js下的reducers.js文件

---

现在，这应该返回posts表的字段值，带有

post id=2

您的操作似乎有一个额外的

dispatch=>

export const getCurrentPostLikes = () => dispatch => {

    setTimeout(() => {
      axios.get(`/api/get_post_likes/2`)
          .then(res => {
              // console.log(response.data.likes);
              // console.log(getState());
            setTimeout(() => {
                dispatch({
                    type: GET_POST_LIKES,
                    payload: res.data.likes
                })
            }, 4000);
          })
          .catch(err => {
              dispatch({
                  type: GET_POST_LIKES,
                  payload: {}
              })
          })
    }, 3000);

}

---

这是使用redux thunk的action creator curried函数的“签名”：

export const getCurrentPostLikes = () => async dispatch => {
  const response = await axios.get(`/api/get_post_likes/2`);
  dispatch({ type: GET_POST_LIKES, payload: response.data.likes });
};

---

您的问题在Entry.js，这一行：

const store=createStore（reducer，applyMiddleware（thunk）
+window.\uuuuRedux\uDevTools\uuuu EXTENSION\uuuux&&window.\uuuuuRedux\uDevTools\uuExtension（）

您正在将thunk中间件设置为第二个参数。第二个参数用于初始状态。 thunk中间件应该是createStore函数第三个参数中组合增强器的一部分

参数的应用应如下所示：

createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

完整示例：

import { createStore, applyMiddleware, compose } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import createHistory from 'history/createHashHistory'
import rootReducer from './core/reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)


export default createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

---

这是您希望动作创建者的外观：

export const getCurrentPosts = () => {
  return async function(dispatch, getState) {
    const response = await axios.get("/api/get_post_likes");
    dispatch({ type: "GET_POST_LIKES", payload: response });
  };
};

不考虑承诺，使用ES7

async/await

语法，也不考虑

setTimeout

，除非你能提供一个非常好的理由，证明你想超时一个已经花费了非零时间完成的异步请求，也许我不明白，但你确实想要数据，不知道您的减速机必须完成其工作，并最终更新应用程序中的状态

---

我上面的东西并不完美，因为它的样板文件，比如你不需要

getState

，不需要，是的，它是中间件的一部分，但是如果你不打算使用某个东西，就不需要定义它，但无论如何，我正试图让你的动作创建者再次工作，你正在省去你的眼睛和你的mind.

我也尝试过这种方法，没有调度=>，但不起作用检查：redux使用此函数确定您的操作是普通对象。主要问题是为什么操作创建者中的

设置超时值

？您没有返回普通对象，您返回的是函数…也尝试了没有设置超时值，请检查e更新了代码中的action creator，但仍然相同error@SakoBu，我正要问同样的问题。说得对。

createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

import { createStore, applyMiddleware, compose } from 'redux'
import { connectRouter, routerMiddleware } from 'connected-react-router'
import thunk from 'redux-thunk'
import createHistory from 'history/createHashHistory'
import rootReducer from './core/reducers'

export const history = createHistory()

const initialState = {}
const enhancers = []
const middleware = [thunk, routerMiddleware(history)]

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension())
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers
)


export default createStore(
  connectRouter(history)(rootReducer),
  initialState,
  composedEnhancers
)

export const getCurrentPosts = () => {
  return async function(dispatch, getState) {
    const response = await axios.get("/api/get_post_likes");
    dispatch({ type: "GET_POST_LIKES", payload: response });
  };
};