Redux 简写 `mapDispatchToProps` 返回未定义的 `async` 动作/thunk

Question

我遇到了我认为可能是错误但可能是我的理解的问题。

基本上import 的async action 在Redux 容器内返回未定义，但我知道导入很好（文件存在，它是正确的大小写等）。

仔细观察，当我迁移到容器中的速记对象表示法时，问题似乎已经开始，这是一个示例：

thunks.js

import { anAsyncFunc } from './anotherFile'
export const aThunk = () => async (dispatch, getState) => {
    await dispatch(anAsyncFunc)
    return dispatch(someOtherAsyncFunc)
}

containerThatDoesntWork.js

import { aThunk  } from './thunks.js'
import MyComponent from './MyComponent'

console.log(aThunk) // undefined

const mapDispatchToProps = {
    aThunk
}

containerThatDoesWork.js

import { aThunk  } from './thunks.js'
import MyComponent from './MyComponent'

console.log(aThunk) // undefined

const mapDispatchToProps = dispatch => ({
    aThunk: () => {
       console.log(aThunk) // return async function (dispatch, getState) { ... }
       return dispatch(aThunk())
    }
})

在这两种情况下，如果我在container 中的console.log(aThunk) 我得到未定义，我认为这与async 函数的模块分辨率有关？

但是，在第二个示例中，将导入显式包装在一个函数中，组件是快乐的，而简而言之，它不是（PropTypes 验证失败）。

有人知道解决这个问题的方法吗？还是对象速记符号中mapDispatchToProps 的限制？

Answer 1

const mapDispatchToProps = {
    aThunk
}

和

const mapDispatchToProps = dispatch => ({
    aThunk: () => dispatch(aThunk())
})

应该以相同的方式表现。如果mapDispatchToProps 是一个对象，属性会自动转换为() => dispatch(action)。两者都应该导致aThunk prop 返回aThunk()(dispatch) 的结果，即一个promise。

这里是a demo。

named import 可以在模块范围内未定义但存在于函数范围内的唯一原因是在延迟访问依赖项时解决了循环依赖项。使用 dispatch => ... 完成的这样的函数包装依赖项是一种已知的解决循环依赖项的方法，幸运的是，mapDispatchToProps 支持它，但最好不要一开始就拥有它们，特别是如果这不是设计使然.