В чем ошибка при переключении года?

Question

[dfv123]

Прохожу этот замечательный туториал https://www.gitbook.com/book/maxfarseer/redux-cour...
столкнулся со следующей досадной ошибкой при переключении года
prntscr.com/ihoy4i
и при передаче функции setYear через пропс в компонент page ловлю следующее
prntscr.com/ihp2zf
собственно сам код
https://codesandbox.io/s/7znywy46lj
прошу помощи

Comments

[Максим]

dfv123 готовится новый учебник, поэтому можете подписаться в твиттере, там будет информация.

[Yaroslav Rostanets]

Максим, а по react-native планируется?
Хоть в далекой перспективе?

[Максим]

Yaroslav Rostanets, можно, сейчас RN более-менее стабильный, под iOS у меня уже есть рабочий проект, где можно подчерпнуть опыта для курса. Под андроид в процессе, поэтому в далекой перспективе - возможно. Спасибо за интерес.

Answer 1

[Роман Александрович]

https://codesandbox.io/s/mopx1nzpkj
у вас куча маленьких ошибок
1 вы не поключили connect и следовательно компонент не знает о функции setYear
2 вы выводите год как {year} но как только жмете на 1 из кнопок года то в редусер вы ложете не число а обьект
return { ...state, year: action.payload } это вернет вам {year:2017} и в компоненте уже к нему обращаться нужно вот так {year.year}

вот в этом моменте const { year, photos} = this.props вы получате ваши данные в компоненте. Выведите их в консоль и тогда вам станет немного понятнее в чем у вас ошибки

Comments

[dfv123]

Благодарю

[dfv123]

Верно я понимаю, что при разделении на контейнеры(умные) и компоненты(глупые), в последних (глупых) я, чтобы вызвать функцию, которую я прокинул через пропс, в нашем случае это setYear, должен выполнить connect этой функции? prntscr.com/ihpegd

[Роман Александрович]

dfv123, ну вы же хотите вызвать функцию которая описана в экшене. Для этого необходимо либо в компонент ее прокинуть через connect либо прокинуть ее через родителя.
В качестве умных как раз и используют контейнер в котором и пишут конект и подключают необходимые экшены и импортируют даные из стора. А затем необходимые функции и даные прокидывают в глупый компонент. Я же в вашем примере поступил немного не красиво.

[dfv123]

Роман Александрович, прошу прощения, вы бы не могли показать мне как правильно и красиво будет прокинуть функцию в глупый компонент и оттуда ее вызвать? Буду очень признателен вам

[Роман Александрович]

dfv123, https://codesandbox.io/s/2o256z4wn0
container App.js

[dfv123]

Роман Александрович, еще раз прошу прощения но почему у нас функция onYearBtnClick и в App, и в Page? Откуда можно удалить ее?

[Роман Александрович]

dfv123, ))) Это не у меня это у вас. В арр она не нужна потому что клик происходит в компоненте а не в контейнере.

[dfv123]

Роман Александрович, огромное спасибо за помощь!