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.

of

Redux - 4Developers Slide 1 Redux - 4Developers Slide 2 Redux - 4Developers Slide 3 Redux - 4Developers Slide 4 Redux - 4Developers Slide 5 Redux - 4Developers Slide 6 Redux - 4Developers Slide 7 Redux - 4Developers Slide 8 Redux - 4Developers Slide 9 Redux - 4Developers Slide 10 Redux - 4Developers Slide 11 Redux - 4Developers Slide 12 Redux - 4Developers Slide 13 Redux - 4Developers Slide 14 Redux - 4Developers Slide 15 Redux - 4Developers Slide 16 Redux - 4Developers Slide 17 Redux - 4Developers Slide 18 Redux - 4Developers Slide 19 Redux - 4Developers Slide 20 Redux - 4Developers Slide 21 Redux - 4Developers Slide 22 Redux - 4Developers Slide 23 Redux - 4Developers Slide 24 Redux - 4Developers Slide 25 Redux - 4Developers Slide 26 Redux - 4Developers Slide 27 Redux - 4Developers Slide 28 Redux - 4Developers Slide 29 Redux - 4Developers Slide 30 Redux - 4Developers Slide 31 Redux - 4Developers Slide 32 Redux - 4Developers Slide 33 Redux - 4Developers Slide 34 Redux - 4Developers Slide 35 Redux - 4Developers Slide 36 Redux - 4Developers Slide 37 Redux - 4Developers Slide 38 Redux - 4Developers Slide 39 Redux - 4Developers Slide 40 Redux - 4Developers Slide 41 Redux - 4Developers Slide 42 Redux - 4Developers Slide 43 Redux - 4Developers Slide 44 Redux - 4Developers Slide 45 Redux - 4Developers Slide 46 Redux - 4Developers Slide 47 Redux - 4Developers Slide 48 Redux - 4Developers Slide 49 Redux - 4Developers Slide 50 Redux - 4Developers Slide 51 Redux - 4Developers Slide 52 Redux - 4Developers Slide 53 Redux - 4Developers Slide 54 Redux - 4Developers Slide 55 Redux - 4Developers Slide 56 Redux - 4Developers Slide 57 Redux - 4Developers Slide 58 Redux - 4Developers Slide 59 Redux - 4Developers Slide 60 Redux - 4Developers Slide 61 Redux - 4Developers Slide 62 Redux - 4Developers Slide 63 Redux - 4Developers Slide 64 Redux - 4Developers Slide 65 Redux - 4Developers Slide 66 Redux - 4Developers Slide 67 Redux - 4Developers Slide 68 Redux - 4Developers Slide 69 Redux - 4Developers Slide 70 Redux - 4Developers Slide 71 Redux - 4Developers Slide 72 Redux - 4Developers Slide 73 Redux - 4Developers Slide 74 Redux - 4Developers Slide 75 Redux - 4Developers Slide 76 Redux - 4Developers Slide 77 Redux - 4Developers Slide 78 Redux - 4Developers Slide 79 Redux - 4Developers Slide 80 Redux - 4Developers Slide 81 Redux - 4Developers Slide 82 Redux - 4Developers Slide 83 Redux - 4Developers Slide 84 Redux - 4Developers Slide 85 Redux - 4Developers Slide 86 Redux - 4Developers Slide 87 Redux - 4Developers Slide 88 Redux - 4Developers Slide 89 Redux - 4Developers Slide 90 Redux - 4Developers Slide 91 Redux - 4Developers Slide 92 Redux - 4Developers Slide 93 Redux - 4Developers Slide 94 Redux - 4Developers Slide 95 Redux - 4Developers Slide 96 Redux - 4Developers Slide 97 Redux - 4Developers Slide 98 Redux - 4Developers Slide 99 Redux - 4Developers Slide 100 Redux - 4Developers Slide 101 Redux - 4Developers Slide 102 Redux - 4Developers Slide 103 Redux - 4Developers Slide 104 Redux - 4Developers Slide 105 Redux - 4Developers Slide 106 Redux - 4Developers Slide 107 Redux - 4Developers Slide 108 Redux - 4Developers Slide 109 Redux - 4Developers Slide 110
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Redux - 4Developers

Download to read offline

4Developers - Redux presentation

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

4Developers - Redux presentation

Views

Total views

99

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×