从中间件调度 thunk 会导致错误

Question

我的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

Answer 1

您需要将一个函数传递给您.then，但不像现在那样立即调用它。此外，更改您的中间件以使用柯里化来传递分派并创建闭包。将最后一个then块重写为.then(() => { store.dispatch(myThunk(param1, param2, param3)) })