Question

我有这个错误：

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

虽然，据我所知，我完全使用Redux Async教程。

我的商店：

import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import dashboardBookReducer from '../reducers/dashboardBookReducer'

const loggerMiddleware = createLogger()

const configureStore = (railsProps) => (
  createStore(dashboardBookReducer,
              railsProps,
              compose(applyMiddleware(thunkMiddleware, loggerMiddleware)
            )
          )
)

export default configureStore

动作：

export function fetchBooksPage (link) {
  return dispatch => {
    dispatch(requestBooksPage(link))
    return axios.get(link)
      .then(response => dispatch(receiveBooksPage(response.data)))
  }
}

组件：

class Paginate extends Component {
  constructor (props) {
    super(props)
    this.handlePageClick = this.handlePageClick.bind(this)
  }
  handlePageClick (e, link) {
    e.preventDefault()
    const { dispatch, fetchBooksPage } = this.props
    dispatch(fetchBooksPage(link))
  } ...

同样奇怪的是：在两个动作之间，这个函数调度记录器偶然发现了未定义的动作：

action REQUEST_BOOKS_PAGE @ 19:28:45.150
action undefined @ 19:28:45.156
action RECEIVE_BOOKS_PAGE @ 19:28:45.194

 action undefined @ 19:34:34.122
redux-logger.js?96ec:1  prev state Object {books: Array(10), employees: Object, employeesList: Array(4), booksPagination: Object, booksState: Object}
redux-logger.js?96ec:1  action     Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
redux-logger.js?96ec:1  error      Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1844), <anonymous>:158:13)
    at eval (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:4507), <anonymous>:1:7806)
    at eval (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:4514), <anonymous>:14:16)
    at Paginate.handlePageClick (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1949), <anonymous>:45:7)
    at onClick (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1949), <anonymous>:79:31)
    at Object.ReactErrorUtils.invokeGuardedCallback (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1097), <anonymous>:69:16)
    at executeDispatch (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1069), <anonymous>:85:21)
    at Object.executeDispatchesInOrder (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:1069), <anonymous>:108:5)
    at executeDispatchesAndRelease (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:641), <anonymous>:43:22)
    at executeDispatchesAndReleaseTopLevel (eval at <anonymous> (webpack-bundle.self-7258924….js?body=1:641), <anonymous>:54:10)
redux-logger.js?96ec:1  next state Object {books: Array(10), employees: Object, employeesList: Array(4), booksPagination: Object, booksState: Object}

Answer 1

export function fetchBooksPage (link) {
  return dispatch => {
    dispatch(requestBooksPage(link))
    return () => {
      axios.get(link)
        .then(response => dispatch(receiveBooksPage(response.data)))
    }
  }
}

删除了问题，但我不确定究竟发生了什么

操作必须是普通对象错误

1 个答案: