时间戳

首页 > 解决方案 > Redux 简写 `mapDispatchToProps` 返回未定义的 `async` 动作/thunk

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

问题描述

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

基本上一个在容器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())
    }
})

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

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

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

标签： reactjsreduxasync-awaitredux-thunk

解决方案

const mapDispatchToProps = {
    aThunk
}

和

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

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

这是一个演示。

命名导入可以在模块范围内未定义但存在于函数范围内的唯一原因是在延迟访问依赖项时解决了循环依赖项。使用这样的函数包装依赖项dispatch => ...是一种已知的解决循环依赖mapDispatchToProps项的方法，幸运的是，它得到了 .

推荐阅读