0

我在我的actions.js文件中定义了一个 thunk：

export const myThunk = (param1, param2, param3) => {
   return dispatch => {
      dispatch({type: types.myThunkType})
      fetch(`https://mockurl.com?param1=${param1}&param2=${param2}&param3=${param3}`)
      .then(response => response.json())
      .then(data => {
         dispatch({type: types.everythingsAllRight, payload: data.results})
      })
   }
}

当我从一个 React 组件调度它时，一切都像一个魅力。在我的component.js我们有这样的事情：

import myThunk from './actions/actions.js'
const dispatch = useDispatch()

return (
   <button onClick={() => {dispatch(myThunk(props.param1, props.param2, props.param3)}>
)

但是，当我尝试从中间件使用相同的 thunk 时，如下所示：

   store.dispatch(anPlainObjectActionDefinedInActionsJsToo(param1, param2, false))
   .then(() => { 
      store.dispatch({
         type: types.anotherImportantActionType,
         payload: {
            thisData: someData,
            thatData: someOtherData
         }
      })
   })
   .then(store.dispatch(myThunk(param1, param2, param3)))

我收到此错误：

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.

该错误正在处理处理操作类型的中间件myThunkType：

Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.
▶ 3 stack frames were collapsed.
(anonymous function)
src/Store/middleware/middlewareThatDealsWithMyThunkTupeActionType.js:9
   6 | }
   7 | if (action.type !== types.myThunkType &&
   8 |    action.type !== types.anotherType) {
>  9 |    return next(action)
     | ^  10 | }
  11 |

因为它不能“返回下一个动作”。任何提示我做错了什么？

编辑：在调试中检查，我发现调度的 thunk 在它到达中间件时看起来像这样：https ://imgur.com/s7AS8eD

4

1 回答 1

0

您需要将一个函数传递给您.then，但不要像现在这样立即调用它。此外，更改您的中间件以使用柯里化来传递调度并创建一个闭包。then将最后一个块重写为

.then(() => {
store.dispatch(myThunk(param1, param2, param3))
})

您可以在此处阅读有关自定义 redux 中间件和柯里化的更多信息

于 2020-10-08T17:51:51.983 回答