Uncaught TypeError: Cannot read properties of undefined (reading 'then')?

Question

[SeeYou1ater]

Есть ThunkCreator, который при успешном сохранении информации профиля возвращает код 0 и как бы всё отлично, должен выполнится .then(), который установит editMode в 'false' и информация сохранится. В ином случае диспатчит ошибку в форму и НЕ сохраняет данные и возвращает Promise.reject(), соответственно .then() не выполнится и из режима редактирования мы не выйдем. Но что то идёт не так, я пока что не понимаю, но хочется решить проблему, спокойно не усну.

Сам код:

export const saveProfileThunkCreator = (editDataAboutMe) => {
  return async (dispatch, getState) => {
    const authUserId = getState().auth.id
    let data = await profileAPI.saveProfile(editDataAboutMe)
      if (data.resultCode === 0) {
      dispatch(setUserProfileThunkCreator(authUserId))
    } else {
      dispatch(stopSubmit('AboutMeEditForm', {_error: data.messages[0]}))
      return Promise.reject()
    }
  }
}

const onSubmit = (editDataAboutMe) => {
    props.saveProfile(editDataAboutMe).then(() => {
      setEditMode(false)
    })
  }

Answer 1

[Khalit]

Дело в том что вы ничего не возвращаете в случае если result.code === 0 а по умолчанию возвращается undefined а потом вы у него вызываете метод then. Вот так должно работать

export const saveProfileThunkCreator = (editDataAboutMe) => {
  return async (dispatch, getState) => {
    const authUserId = getState().auth.id
    let data = await profileAPI.saveProfile(editDataAboutMe)
      if (data.resultCode === 0) {
      dispatch(setUserProfileThunkCreator(authUserId))
      return Promise.resolve()
    } else {
      dispatch(stopSubmit('AboutMeEditForm', {_error: data.messages[0]}))
      return Promise.reject()
    }
  }
}

Comments

[SeeYou1ater]

Пробовал так, не работает...

[Khalit]

Я не хорошо разбираюсь в thunk но попробуйте так

export const saveProfileThunkCreator = (editDataAboutMe) => {
	return (dispatch, getState) => {
		return (async()=>{
      			const authUserId = getState().auth.id
      			let data = await profileAPI.saveProfile(editDataAboutMe)
      			if (data.resultCode === 0) {
      				dispatch(setUserProfileThunkCreator(authUserId))
    			} else {
      				dispatch(stopSubmit('AboutMeEditForm', {_error: data.messages[0]}))
      				throw ""
    			}
		)()
	}
}

[SeeYou1ater]

Khalit, тоже самое 'undefined'

[Khalit]

В saveProfile вы указали return, я проверял этот участок кода и он у меня работает, проблема скорее всего в чем то другом

[SeeYou1ater]

Khalit, суть в том, что именно для этой ситуации async функция не возвращает промис, возвращается undefined. Вообще я мог бы решить эту проблему через глобальный стейт и обычным диспатчем и изменением этой переменной, но во-первых, это не интересно. Во-вторых у автора, кто сделал абсолютно так же всё работает с тем, как у меня написано. Просто хочется понять, где я что то упустил, а может и не упустил, потому что я не один, у кого это штука не работает, так как ожидается...

[SeeYou1ater]

Khalit, если then вовсе убрать, то ошибку я просто не увижу (точнее она вылезет, но с ошибкой он даст сохранить и она будет отображаться на страничке редактирования. Сохранятся и перерисовываться данные будут, с этим всё хорошо. То есть проблема именно с этим then или самой функцией в санках...

[Khalit]

dispatch(saveProfileThunkCreator(data)) должен возвращать Promise думаю вы его где-то не возвращаете

[SeeYou1ater]

Khalit, ну я пока не нашел, где именно. Вообще вызывается функция saveProfileThunkCreator, которая возвращает нашу async санку в которую мы передали параметры (для того мы как раз и создаем оболочку saveProfileThunkCreator, чтобы передать параметры), по сути мы эту санку диспатчим, то есть async априори документации должен возвращать промис, но этого не происходит...Хоть убейте не могу понять, что не так...

Answer 2

[Сергей Соколов]

1. thunk _{(на англ.)} задуман как кусок кода, который выполняется «потом» и независимо от UI.
Так что затея что-то там оборвать «в форме» кажется неправильной. Всё, что делает thunk – берёт что-то из состояния через getState() и рано или поздно меняет состояние через dispatch().

2. внутри async функции возвратить Promise.reject() — то же, что бросить Exception в обычном синхронном коде. Подробнее.

Comments

[SeeYou1ater]

Насчет подхода bll, ui было понятно, и метод getState() бывает излишен, но подход это подход, а есть жизнь, то что я перенесу эту переменную в bll это я писал выше(если нет, то сорян, после 13 часов кода мог или неверно написать или забыл упомянуть об этом), тут вопрос в другом. Почему у человека, который сделал абсолютно так же все работает?(ссылку могу прикрепить).

Насчет Promise.reject(), если написать любую async функцию в песочнице, тоже с асинхронщиной, то там тоже все отлично, промис выбрасывает данные в then(), а это такая же функция как и в thunkах, thunk по сути миддл прослойка, которая позволяет диспатчить функции, а диспатчим функции банально чтобы прокинуть метод диспатч ну и тот же гетстейт, по сути это такая же асинк функция, которая будет выполнять диспатчи обычных экшнов, с асинхроном. Соответственно разве в ней не будет работать Promise.reject() и Promise.resolve() как и должно?

[SeeYou1ater]

НО, на том же лерне (конкретно тот раздел, который вы скинули) с await, может быть он не успевает зарезолвиться или режектнуться и потому кидает в undefiined...Позже проверю...

[Сергей Соколов]

ещё напутали: saveProfileThunkCreator() возвращает функцию. Вызывать-то её кто будет?

тогда уж

-props.saveProfile(editDataAboutMe).then(
+props.saveProfile(editDataAboutMe)(dispatch, getState).then(

только где вы их возмёте, эти dispatch с getState'ом.

[SeeYou1ater]

Сергей Соколов, все верно, возвращает нашу санку в которую и приходит (dispatch, getState), и эта санка и есть saveProfile()

[SeeYou1ater]

SeeYou1ater, точнее в mapDispatchToProps

saveProfile: (editDataAboutMe) => {dispatch(saveProfileThunkCreator(editDataAboutMe))
}

[SeeYou1ater]

SeeYou1ater, когда мы диспатчим санку, по сути стор ее и запускает прокидывая параметрами dispatch и getState