Question

我正在将redux与redux-observable一起使用，并得到这个奇怪的错误：

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

/* Component.jsx */
import React from "react"
import { serialNumberCheck } from '../actions'

const Component = props => {
  ...
  <button
    onClick={() => props.serialNumberCheck('123456789123456')}
  >
    Check
  </button>
  ...
}

const mapDispatchToProps = dispatch =>
  bindActionCreators({serialNumberCheck}, dispatch)

export default compose(
  reduxForm({
    ...
  }),
  withStyles(styles),
  connect(mapDispatchToProps)
)(Component)



/* actions.js */
export const SERIAL_NUMBER_CHECK = 'SERIAL_NUMBER_CHECK'
export const SERIAL_NUMBER_CHECK_SUCCESS = 'SERIAL_NUMBER_CHECK_SUCCESS'

export const serialNumberCheck = (serialNumber) => ({
  type: SERIAL_NUMBER_CHECK,
  payload: serialNumber
})

export const serialNumberCheckSuccess = (data) => ({
  type: SERIAL_NUMBER_CHECK,
  payload: data
})



/* epics.js */
...
import { serialNumberCheck } from "../actions"
import ... from 'rxjs'

...
function serialNumberCheckEpic(action$) {
  return action$
    .ofType(SERIAL_NUMBER_CHECK)
    .switchMap((data) => {
      return ajax.getJSON(`http://localhost:3004/sn/?sn=${data.payload}`)
      .map((data) => data)
    })
    .map(data => {
      if(data.length !== 0) {
        serialNumberCheckSuccess({success: true});
      }
    })
}

...
export const rootEpic = combineEpics(
  ...
  serialNumberCheckEpic
);



/* reducer.js */
import {
  SERIAL_NUMBER_CHECK_SUCCESS,
} from '../actions'

...
export default function epicReducer(state = initialState, action) {
  switch (action.type) {
    case SERIAL_NUMBER_CHECK_SUCCESS:
      return {
        ...state,
        success: action.payload
      }
  }
}

/* JSON-SERVER RESPONSE */
[
  {
    "id": 1,
    "sn": "123456789123456"
  }
]

内部组件中，我正在调用函数serialNumberCheck（）并传递我们需要检查的内部序列号。

在Epic im内部，将序列号传递给json-server，该序列号检查我的“数据库”中是否存在该编号。如果存在序列号，则服务器响应为包含某些参数的.json。

因此，如果响应不为空，则需要编写成功：在redux存储中为true。

但是最后我们得到成功的GET请求，然后出现错误：操作必须是普通对象。 ，但自定义中间件可用于异步操作。，但是redux-store内部没有任何更改，SERIAL_NUMBER_CHECK_SUCCESS操作也没有任何作用。

Answer 1

最后，我找到了解决方案。我刚刚错过了返回，然后在我的史诗中调用动作。

function serialNumberCheckEpic(action$) {
  return action$
    .ofType(SERIAL_NUMBER_CHECK)
    .switchMap((data) => {
      return ajax.getJSON(`http://localhost:3004/sn/?sn=${data.payload}`)
      .map((data) => data)
    })
    .map(data => {
      if(data.length !== 0) {
        + return serialNumberCheckSuccess({success: true});
      }
    })
}

redux / redux-observable错误：动作必须是普通对象

1 个答案: