4Developers - Redux presentation

1. PODRÓŻE W CZASIE Z
ARCHITEKTURĄ REDUX

2. ELIASZ SAWICKI
‣ Blog: www.eliaszsawicki.com
‣ Twitter: @EliSawic

3. REDUX
‣ Skąd i po co?
‣ Jak to działa?
‣ Przemyślenia

4. SKĄD I PO CO?

5. CZEGO UŻYĆ?

6. REACT

7. KOMPONENTY

8. FLUX

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. FLUX
‣ application architecture
‣ unidirectional data flow
‣ pattern
‣ without a lot of new code

11. DAN ABRAMOV

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. DEV TOOLS

14. TIME TRAVEL

16. RECORDING

18. HOT RELOADING

20. FLUX
NIE DO KOŃCA
WSPIERAŁ

21. REDUX

23. RESWIFT

24. DUŻO ZALEŻY OD
PLATFORMY

25. 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

26. JAK TO DZIAŁA?

27. WYOBRAŹMY TO SOBIE

28. URZĄD SKARBOWY

29. EXCEL

30. WYSŁAĆ LIST

31. POPROSIĆ
KSIĘGOWEGO

32. URZĄD SKARBOWY
ODBIERA

33. PRZEKAZUJE DO
URZĘDNIKA

34. URZĘDNIK
AKTUALIZUJE
AKTA

35. AKTUALIZUJE
AKTA
FIRMY

37. DOSTAJEMY
INFORMACJĘ
ZWROTNĄ

38. AKTUALIZACJA
EXCELA

39. EXCEL
LIST
URZĄD SKARBOWY
URZĘDNIK
URZĘDNIK
STAN
STAN

40. REDUX

41. GŁÓWNE ELEMENTY
‣ State
‣ Actions
‣ Reducers
‣ Store

42. STATE

44. STATE

45. PROSTY STAN
struct CompanyState {
var isTaxPaidOnTime: Bool
}

46. STAN APLIKACJI SKŁADA SIĘ Z PODSTANÓW
struct ApplicationState {
var companyState: CompanyState
var loginState: LoginState
var user: User
var navigationState: NavigationState
}

47. VIEW
STATE

48. ACTIONS

49. AKCJA NIOSĄCA DANE
struct ChangeTaxPaymentStatus: Action {
let isPaid: Bool
}

50. AKCJA OPARTA NA TYPIE
struct IncreaseCounter: Action {}

51. VIEW
ACTION
STATE

52. ACTION CREATORS

53. TWORZENIE AKCJI
func updateAccount() {
getTaxInfo(completion: { tax in
store.dispatch(ChangeTaxPaymentStatus(isPaid: tax.isPaid))
})
}

54. STORE

55. ODBIERA LISTY

56. ZARZĄDZA ZMIANAMI

57. INFORMUJE O
ZMIANACH

58. INFORMACJE O ZMIANIE
protocol Store {
func subscribe(subscriber: Subscriber)
}

59. WYSYŁANIE LISTÓW
protocol Store {
func subscribe(subscriber: Subscriber)
func dispatch(action: Action)
}

60. TWORZENIE STORE’A
protocol Store {
func subscribe(subscriber: Subscriber)
func dispatch(action: Action)
init(urzędnicy: Urzędnicy, state: State)
}

61. TWORZENIE STORE’A
protocol Store {
func subscribe(subscriber: Subscriber)
func dispatch(action: Action)
init(reducer: Reducer, state: State)
}

62. VIEW
ACTION
STORE
STATE
STATE

63. REDUCER

64. REDUCER
(Action, State?) -> State

65. REDUCER APLIKACJI
func appReducer(action: Action, state: AppState?) -> AppState {
return AppState(
companyState: companyReducer(action, user: state?.companyState),
navState: navReducer(action, navState: state?.navState)
)
}

66. 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
}

67. REDUCER + FLUXREDUX

68. VIEW
ACTION
STORE
REDUCER
REDUCER
STATE
STATE

69. TO NIE WSZYSTKO

70. STORE APLIKACJI
let mainStore = Store<AppState>(reducer: counterReducer, state: nil)

71. SUBSCRIBE
class CounterViewController: UIViewController, StoreSubscriber {
override func viewWillAppear(_ animated: Bool) {
mainStore.subscribe(self)
}
override func viewWillDisappear(_ animated: Bool) {
mainStore.unsubscribe(self)
}
}

72. NEW STATE
class CounterViewController: UIViewController, StoreSubscriber {
func newState(state: AppState) {
...
}
}

73. DISPATCH ACTION
class CounterViewController: UIViewController, StoreSubscriber {
@IBAction func upButtonTapped(_ sender: UIButton) {
mainStore.dispatch(CounterIncrease())
}
@IBAction func downButtonTapped(_ sender: UIButton) {
mainStore.dispatch(CounterDecrease())
}
}

74. PROSTE AKCJE
struct CounterIncrease: Action {}
struct CounterDecrease: Action {}

75. ACTION CREATOR
struct CounterSetValue: Action {
var value: Int
}
func setCounterValue() {
countRepository.getCount { count in
store.dispatch(CounterSetValue(value: count))
}
}

76. 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
}

77. REAKCJA NA ZMIANE
class CounterViewController: UIViewController, StoreSubscriber {
func newState(state: AppState) {
counterLabel.text = "Counter: (state.counter)"
}
}

78. GŁÓWNE ELEMENTY
‣ State
‣ Actions
‣ Reducers
‣ Store

79. MOJE
PRZEMYŚLENIA

80. WARTO?

81. ZALEŻY

82. POZNAWAJMY INNE
PODEJŚCIA

83. UNIDIRECTIONAL
DATA
FLOW

84. AKCJE NIE POSIADAJĄ
CALLBACKÓW

85. UNIKAJMY
CYKLI
ZDARZEŃ

86. ROOT A B

87. ROOT A B

88. JEDNO
ŹRÓDŁO
PRAWDY

89. 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
}
}

90. USTAWIANIE STANU
class ComponentA {
var componentB: ComponentB
func applyState(state: State) {
componentB.applyState(state)
}
}
class ComponentB {
func applyState(state: State) {
}
}

91. STATE MANAGER

92. STANDARDY
NIE SĄ
ZŁE

93. WYKONANIE ZADANIA?

94. ACTION CREATOR

95. ZMIANA STANU

96. REDUCER

97. GDZIE JEST STAN?

98. STORE

99. UŁATWIA PRACĘ

100. DESIGN
FOR
ITERATION

101. DEV TOOLS

102. ŁATWY DOSTĘP
DO EKRANÓW,
NAD KTÓRYMI
PRACUJEMY

103. PRZYGOTOWANE
ODPOWIEDZI

104. FAKE REQUEST

105. WIREMOCK

106. UNIT TESTY

107. SNAPSHOT TESTY

108. IOS
SNAPSHOT
TESTCASE

109. PRZEMYŚLENIA
‣ unidirectional data flow
‣ jedno źródło prawdy
‣ standardy nie są złe
‣ design for iteration

110. ZAWSZE
JEST
INNA DROGA