Најбољи начин за архитектуру апликације Редук

Овај чланак говори о томе како размишљати у Редук-у. Покушаћемо да схватимо како можемо да користимо ову дивну библиотеку како бисмо нашу апликацију учинили стабилнијом, робуснијом и одрживијом. Језички је агностичан, али задржаћемо свој опсег до Редук-а помоћу Реацт-а.

За оне који раније нису користили Редук, цитираћу из докумената:

Редук је предвидљиви државни контејнер за ЈаваСцрипт апликације.

Само 2кб библиотека решава један од највећих проблема у одржавању великих ЈаваСцрипт апликација: управљање стањем.

Овај чланак није о Редук-у, јер о њему већ постоји много чланака. Уместо тога, ради се о томе како треба да визуализујемо апликацију Редук и ефикасно је користимо.

Рецимо да градимо апликацију за е-трговину на којој се налазе неке основне странице попут каталога, детаља о производу и успеха плаћања.

Испод су наведени оквири како би апликација изгледала:

Дакле, архитектура у Редук-у значи да морамо да визуализујемо апликацију као један ентитет, а свака страница је под-ентитет.

Постоје четири фазе за изградњу Редук апликације:

  1. Визуелизујте дрво државе
  2. Дизајнирајте своје редукторе
  3. Спровести акције
  4. Презентација примене

Корак 1: Визуелизујте стабло стања

Из горњих жичаних оквира, дизајнирајмо наше дрво државе.

Ово је најважнији корак. Након што завршимо са визуализацијом нашег стабла стања, примена Редук техника постаје заиста једноставна! Точкасти кругови су стања која ће апликација делити, пуни кругови су стања специфична за страницу.

Корак 2: Дизајнирајте своје редукторе

У случају да се питате шта је тачно редуктор, цитираћу директно из докумената:

Редуктори одређују како се стање апликације мења као одговор на радње послате у продавницу. Запамтите да акције описују само оно што се догодило , али не описујте како се стање апликације мења.

Свака од важних држава може имати своје редукторе. Касније их можемо комбинирати у један коренски редуктор који ће на крају дефинисати складиште (једини извор истинитости апликације). Овде долази стварна моћ: имате потпуну контролу над својим државама и њиховим понашањем. Трговина ништа не проматра. Тихи посматрач држи стражу.

Погледајмо пример како да дизајнирамо редуктор уз помоћ стабла стања апликације које смо горе дизајнирали.

// Root Reducer const rootReducer = combineReducer({ header: headerReducer, login: loginReducer, footer: footerReducer, common: commonReducer, product: productReducer, catalog: catalogReducer, payment: paymentReducer });

Коренски редуктор све говори. Садржи све што продавница треба да зна о апликацији.

Сада погледајмо како изгледа хеадерРедуцер подентитета.

Сећате се како смо дизајнирали стање заглавља?

// Header Reducer const headerReducer = combineReducer({ menu: menuReducer, search: searchReducer, location: locationReducer });

Наш редуктор је реплика онога што смо раније дизајнирали у нашем државном стаблу. Ово је снага визуелизације.

Приметите како редуктор садржи више редуктора. Не треба да направимо један огромни редуктор. Може се лако разбити на мање редукторе, јер сваки има свој индивидуални идентитет и има своје специфичне операције. Ово нам помаже да створимо раздвајање логике, што је веома важно за одржавање великих апликација.

Сада да схватимо како треба поставити типичну датотеку редуктора, на пример сеарцхРедуцер.

// Search Reducer const initialState = { payload: [], isLoading: false, error: {}}; export function searchReducer( state=initialState, action ) { switch(action.type) { case FETCH_SEARCH_DATA: return { ...state, isLoading: true }; case FETCH_SEARCH_SUCCESS: return { ...state, payload: action.payload, isLoading: false }; case FETCH_SEARCH_FAILURE: return { ...state, error: action.error, isLoading: false }; case RESET_SEARCH_DATA: return { ...state, ...initialState } default: return state; } }

Овај образац редуктора дефинише могуће промене у његовом стању претраживања када се позове АПИ за претрагу.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Све наведено су могуће константе које дефинишу које се могуће радње могу извршити.

Напомена: Важно је одржавати РЕСЕТ_СЕАРЦХ_ДАТА акцију, у случају да треба да ресетујемо податке током демонтаже компоненте.

Корак 3: Спровођење акција

Свака акција која има АПИ позиве обично пролази кроз три фазе у апликацији.

  1. Стање учитавања -> ФЕТЦХ_СЕАРЦХ_ДАТА
  2. Успех -> ФЕТЦХ_СЕАРЦХ_СУЦЦЕСС
  3. Неуспех -> ФЕТЦХ_СЕАРЦХ_ФАИЛУРЕ

Одржавање ових врста акција помаже нам да проверимо проток података када се АПИ позове у нашој апликацији.

Заронимо у код да бисмо разумели како ће изгледати типична акција.

export function fetchSearchData(args) { return async (dispatch) => { // Initiate loading state dispatch({ type: FETCH_SEARCH_DATA }); try { // Call the API const result = await fetchSearchData( args.pageCount, args.itemsPerPage ); // Update payload in reducer on success dispatch({ type: FETCH_SEARCH_SUCCESS, payload: result, currentPage: args.pageCount }); } catch (err) { // Update error in reducer on failure dispatch({ type: FETCH_SEARCH_FAILURE, error: err }); } }; }

Обратите пажњу на то како складиште протоком података прати радње. Због тога су одговорне све промене у апликацији.

Тако се сличне акције пишу за сваку промену у редукторима различитих стања.

Једна од највећих благодати Редука је апстракција сваке акције.

Корак 4: Имплементирајте презентацију

import React, { Component } from 'react'; import { connect } from 'react-redux';; import fetchSearchData from './action/fetchSearchData'; import SearchData from './SearchData'; const Search = (props) => (  ); const mapStateToProps = (state) => ({ search: state.header.search.payload }); const mapDispatchToProps = { fetchSearchData}; export default connect(mapStateToProps, mapDispatchToProps)(Search)

As you can see, the presentation component is very simple and easy to understand.

Conclusion

I would like to mention some of the biggest benefits that I found using Redux:

  1. It certainly reduces code smell.
  2. Abstraction of code is easier to achieve.
  3. Redux also introduces us to other principles like immutability, functional programming, and many others.
  4. It allows you to visualise each and every action and track them with “time traveling.”

I hope this article helps you get a clearer picture of why Redux is truly awesome, and how we can utilise the power of visualisation to make maintainable applications.

Follow me on twitter to get more updates regarding new articles and to stay updated in latest frontend developments. Also share this article on twitter to help others know about it. Sharing is caring ^_^.

Неки корисни ресурси

  1. //редук.јс.орг/
  2. //гитхуб.цом/редукјс/редук/блоб/мастер/екамплес
  3. //медиум.цом/@рајараодв/а-гуиде-фор-буилдинг-а-реацт-редук-цруд-апп-7фе0б8943д0ф#.ц4иххвк0д

Моји претходни чланци

  1. //медиум.фреецодецамп.орг/хов-то-усе-редук-персист-вхен-мигратинг-иоур-статес-а5дее16б5еад
  2. //цодебурст.ио/редук-обсервабле-то-тхе-ресцуе-б27ф07406цф2
  3. //цодебурст.ио/буилдинг-вебапп-фор-тхе-футуре-68д69054цббд
  4. //цодебурст.ио/цорс-стори-оф-рекуестинг-твице-85219да7172д