Сокращение Redux `mapDispatchToProps` возвращает неопределенное значение для` async` action / thunks

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

В обоих случаях, если я console.log(aThunk) в container Я получаю неопределенное, что, как я полагаю, связано с разрешением модуля функций async?

Однако во втором примере, когда импорт явно упакован в функцию, компонент удовлетворен и в сокращенной записи это не так (проверка PropTypes завершается неудачно).

Кто-нибудь знает способвокруг этого?или это ограничение mapDispatchToProps в сокращенной записи объекта?

Answer 1

const mapDispatchToProps = {
    aThunk
}

и

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

должны вести себя так же. Если mapDispatchToProps является объектом, свойства автоматически преобразуются в () => dispatch(action). И то и другое должно привести к aThunk prop, которая возвращает результат aThunk()(dispatch), то есть обещание.

Вот демо .

Единственная причина, по которой именованный импорт может быть неопределенным в области действия модуля, но существует в области действия функции, заключается в том, что существует циклическая зависимость, которая была разрешена во время ленивого доступа к зависимости. Обертывание зависимости с помощью функции, подобной этой, было сделано с помощью dispatch => ... - известный обходной путь для циклических зависимостей, который, к счастью, поддерживается mapDispatchToProps, но предпочтительно не иметь их в первую очередь, особенно если это не было сделано намеренно .