Како повезати Реацт са Редук - дијаграмски водич

Овај пост је намењен људима који већ знају Реацт и Редук. То ће им помоћи да боље разумеју како ствари функционишу испод хаубе. Када сам први пут ушао у Реацт универзум?, ​​Пре ~ 3 године, било ми је врло тешко да схватим како су Редук-ови м apStateToProps и м apDispatchToProps радили и били доступни Реацт компоненти. Ево дијаграмског водича за боље разумевање како Редук-ов ц onnect ради са Реацт-ом.

Рецимо да имамо Searchкомпоненту.

И класична продавница Редук.

Напунимо продавницу Редук Actionдиспечерима и Reducerдржавом.

Редуктор defaultStateизгледа овако. actionПараметар унутар Reducerфункције долази из послаоAction.

Повежимо Реацт компоненту за претрагу са Редук продавницом. Библиотека Реацт-Редук има званичне Реацт везе за Редук.

Пружа connectфункцију повезивања компоненте са продавницом.

mapDispatchToPropsзначи пресликавање функције Ацтион- dispatchа на компоненту Реацт this.props.

Исто се односи и на mapStateToPropsстање где се стање редуктора пресликава на реакциону компоненту this.props.

1. Повежите Реацт са Редук-ом.
2. Тхе mapStateToPropsи mapDispatchToPropsбави се продавницама Редук-а stateи dispatch, респективно.
3. Редуктори stateи акције dispatchдоступни су путем this.propsкомпоненте Реацт.

Резимирајмо цео ток рада Реацт то Редук цоннецт кликом на дугме у компоненти претраживања Реацт.

1. Кликните на submitдугме на компоненти претраживања Реацт
2. clickФункција отпрема радњу. Функција Ацтион dispatchје повезана са компонентом претраживања путем mapDispatchToPropsи доступна јеthis.props
3. (изван опсега овог поста) Отпремљена акција одговорна је за fetchподатке и отпремање друге акције за ажурирање стања редуктора
4. Стање редуктора се ажурира новим подацима претраживања доступним од 3. корака.
5. Стање редуктора је већ повезано this.propsу компоненти за претрагу путемmapStateToProps
6. this.props има најновије податке о претрази и приказ се поново приказује да би се приказали ажурирани резултати претраге