Question

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

基本上import async中的action在Redux容器内返回undefined，但是我知道导入很好（文件存在，是正确的情况，等等））。

经过仔细检查，当我迁移到容器中的简写对象表示法时，问题似乎已经开始，这是一个示例：

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())
    }
})

在两种情况下，如果我在console.log(aThunk)中的container上都不确定，我认为这与async函数的模块分辨率有关吗？

但是，在第二个示例中，将导入显式包装在函数中，该组件很高兴，而用简写形式表示则不满意（PropTypes验证失败）。

有人知道这种方法吗？还是对对象缩写形式mapDispatchToProps的限制？

Answer 1

const mapDispatchToProps = {
    aThunk
}

和

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

应该具有相同的行为方式。如果mapDispatchToProps是对象，则属性会自动转换为() => dispatch(action)。两者都应产生aThunk道具，该道具返回aThunk()(dispatch)的结果，即诺言。

这里是a demo。

为什么命名导入在模块作用域中无法定义但在函数作用域中存在的唯一原因是，在懒惰地访问依赖项时已解决了循环依赖项。用dispatch => ...完成的函数包装依赖项是围绕循环依赖项的已知解决方法，幸运的是mapDispatchToProps支持循环依赖项，但是最好不要将它们放在首位，特别是如果这不是不是故意的。

Redux速记`mapDispatchToProps`对于async`动作/重击返回未定义

1 个答案: