Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Redux - 4Developers

12 views

Published on

4Developers - Redux presentation

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Redux - 4Developers

  1. 1. PODRÓŻE W CZASIE Z ARCHITEKTURĄ REDUX
  2. 2. ELIASZ SAWICKI ‣ Blog: www.eliaszsawicki.com ‣ Twitter: @EliSawic
  3. 3. REDUX ‣ Skąd i po co? ‣ Jak to działa? ‣ Przemyślenia
  4. 4. SKĄD I PO CO?
  5. 5. CZEGO UŻYĆ?
  6. 6. REACT
  7. 7. KOMPONENTY
  8. 8. FLUX
  9. 9. FLUX Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
  10. 10. FLUX ‣ application architecture ‣ unidirectional data flow ‣ pattern ‣ without a lot of new code
  11. 11. DAN ABRAMOV
  12. 12. FRUSTRACJA ▸ Frustracja (łac. frustratio - zawód, udaremnienie) – zespół przykrych emocji związanych z niemożliwością realizacji potrzeby lub osiągnięcia określonego celu. ▸ np. Gdy kolejny raz odtwarzasz stan aplikacji podczas pracy nad nową funkcjonalnością
  13. 13. DEV TOOLS
  14. 14. TIME TRAVEL
  15. 15. RECORDING
  16. 16. HOT RELOADING
  17. 17. FLUX NIE DO KOŃCA WSPIERAŁ
  18. 18. REDUX
  19. 19. RESWIFT
  20. 20. DUŻO ZALEŻY OD PLATFORMY
  21. 21. SKĄD I PO CO? ‣ wyszedł ze świata webowego ‣ inspirowany Fluxem ‣ oparty na chęci szybszej iteracji ‣ dużo zależy od platformy ‣ podejście
  22. 22. JAK TO DZIAŁA?
  23. 23. WYOBRAŹMY TO SOBIE
  24. 24. URZĄD SKARBOWY
  25. 25. EXCEL
  26. 26. WYSŁAĆ LIST
  27. 27. POPROSIĆ KSIĘGOWEGO
  28. 28. URZĄD SKARBOWY ODBIERA
  29. 29. PRZEKAZUJE DO URZĘDNIKA
  30. 30. URZĘDNIK AKTUALIZUJE AKTA
  31. 31. AKTUALIZUJE AKTA FIRMY
  32. 32. DOSTAJEMY INFORMACJĘ ZWROTNĄ
  33. 33. AKTUALIZACJA EXCELA
  34. 34. EXCEL LIST URZĄD SKARBOWY URZĘDNIK URZĘDNIK STAN STAN
  35. 35. REDUX
  36. 36. GŁÓWNE ELEMENTY ‣ State ‣ Actions ‣ Reducers ‣ Store
  37. 37. STATE
  38. 38. STATE
  39. 39. PROSTY STAN struct CompanyState { var isTaxPaidOnTime: Bool }
  40. 40. STAN APLIKACJI SKŁADA SIĘ Z PODSTANÓW struct ApplicationState { var companyState: CompanyState var loginState: LoginState var user: User var navigationState: NavigationState }
  41. 41. VIEW STATE
  42. 42. ACTIONS
  43. 43. AKCJA NIOSĄCA DANE struct ChangeTaxPaymentStatus: Action { let isPaid: Bool }
  44. 44. AKCJA OPARTA NA TYPIE struct IncreaseCounter: Action {}
  45. 45. VIEW ACTION STATE
  46. 46. ACTION CREATORS
  47. 47. TWORZENIE AKCJI func updateAccount() { getTaxInfo(completion: { tax in store.dispatch(ChangeTaxPaymentStatus(isPaid: tax.isPaid)) }) }
  48. 48. STORE
  49. 49. ODBIERA LISTY
  50. 50. ZARZĄDZA ZMIANAMI
  51. 51. INFORMUJE O ZMIANACH
  52. 52. INFORMACJE O ZMIANIE protocol Store { func subscribe(subscriber: Subscriber) }
  53. 53. WYSYŁANIE LISTÓW protocol Store { func subscribe(subscriber: Subscriber) func dispatch(action: Action) }
  54. 54. TWORZENIE STORE’A protocol Store { func subscribe(subscriber: Subscriber) func dispatch(action: Action) init(urzędnicy: Urzędnicy, state: State) }
  55. 55. TWORZENIE STORE’A protocol Store { func subscribe(subscriber: Subscriber) func dispatch(action: Action) init(reducer: Reducer, state: State) }
  56. 56. VIEW ACTION STORE STATE STATE
  57. 57. REDUCER
  58. 58. REDUCER (Action, State?) -> State
  59. 59. REDUCER APLIKACJI func appReducer(action: Action, state: AppState?) -> AppState { return AppState( companyState: companyReducer(action, user: state?.companyState), navState: navReducer(action, navState: state?.navState) ) }
  60. 60. REDUCER PODSTANU func companyReducer(action: Action, company: CompanyState?) -> CompanyState { var resultCompany = company ?? CompanyState() switch action { case let action as ChangeTaxPaymentStatus: resultCompany.isTaxPaidOnTime = action.isPaid } return resultCompany }
  61. 61. REDUCER + FLUXREDUX
  62. 62. VIEW ACTION STORE REDUCER REDUCER STATE STATE
  63. 63. TO NIE WSZYSTKO
  64. 64. STORE APLIKACJI let mainStore = Store<AppState>(reducer: counterReducer, state: nil)
  65. 65. SUBSCRIBE class CounterViewController: UIViewController, StoreSubscriber { override func viewWillAppear(_ animated: Bool) { mainStore.subscribe(self) } override func viewWillDisappear(_ animated: Bool) { mainStore.unsubscribe(self) } }
  66. 66. NEW STATE class CounterViewController: UIViewController, StoreSubscriber { func newState(state: AppState) { ... } }
  67. 67. DISPATCH ACTION class CounterViewController: UIViewController, StoreSubscriber { @IBAction func upButtonTapped(_ sender: UIButton) { mainStore.dispatch(CounterIncrease()) } @IBAction func downButtonTapped(_ sender: UIButton) { mainStore.dispatch(CounterDecrease()) } }
  68. 68. PROSTE AKCJE struct CounterIncrease: Action {} struct CounterDecrease: Action {}
  69. 69. ACTION CREATOR struct CounterSetValue: Action { var value: Int } func setCounterValue() { countRepository.getCount { count in store.dispatch(CounterSetValue(value: count)) } }
  70. 70. REDUCER func counterReducer(action: Action, state: AppState?) -> AppState { var state = state ?? AppState() switch action { case _ as CounterIncrease: state.counter += 1 case _ as CounterDecrease: state.counter -= 1 case let valueAction as CounterSetValue: state.counter = valueAction.value default: break } return state }
  71. 71. REAKCJA NA ZMIANE class CounterViewController: UIViewController, StoreSubscriber { func newState(state: AppState) { counterLabel.text = "Counter: (state.counter)" } }
  72. 72. GŁÓWNE ELEMENTY ‣ State ‣ Actions ‣ Reducers ‣ Store
  73. 73. MOJE PRZEMYŚLENIA
  74. 74. WARTO?
  75. 75. ZALEŻY
  76. 76. POZNAWAJMY INNE PODEJŚCIA
  77. 77. UNIDIRECTIONAL DATA FLOW
  78. 78. AKCJE NIE POSIADAJĄ CALLBACKÓW
  79. 79. UNIKAJMY CYKLI ZDARZEŃ
  80. 80. ROOT A B
  81. 81. ROOT A B
  82. 82. JEDNO ŹRÓDŁO PRAWDY
  83. 83. PRZECHOWYWANIE STANU class ComponentA { var state: State? var componentB: ComponentB func applyState(state: State) { self.state = state componentB.applyState(state) } } class ComponentB { var state: State? func applyState(state: State) { self.state = state } }
  84. 84. USTAWIANIE STANU class ComponentA { var componentB: ComponentB func applyState(state: State) { componentB.applyState(state) } } class ComponentB { func applyState(state: State) { } }
  85. 85. STATE MANAGER
  86. 86. STANDARDY NIE SĄ ZŁE
  87. 87. WYKONANIE ZADANIA?
  88. 88. ACTION CREATOR
  89. 89. ZMIANA STANU
  90. 90. REDUCER
  91. 91. GDZIE JEST STAN?
  92. 92. STORE
  93. 93. UŁATWIA PRACĘ
  94. 94. DESIGN FOR ITERATION
  95. 95. DEV TOOLS
  96. 96. ŁATWY DOSTĘP DO EKRANÓW, NAD KTÓRYMI PRACUJEMY
  97. 97. PRZYGOTOWANE ODPOWIEDZI
  98. 98. FAKE REQUEST
  99. 99. WIREMOCK
  100. 100. UNIT TESTY
  101. 101. SNAPSHOT TESTY
  102. 102. IOS SNAPSHOT TESTCASE
  103. 103. PRZEMYŚLENIA ‣ unidirectional data flow ‣ jedno źródło prawdy ‣ standardy nie są złe ‣ design for iteration
  104. 104. ZAWSZE JEST INNA DROGA

×