Simplifying State by partially introducing unidirectional data flow in your codebase

Simplifying State by partially introducing unidirectional data flow in your codebase

Fea6d57cccac4021b6c8acbfaa468965?s=128

Benedikt Terhechte

October 13, 2017
Tweet

Transcript

  1. 1.

    1

  2. 2.

    2

  3. 3.

    3

  4. 4.

    4

  5. 5.

    5

  6. 6.

    6

  7. 7.

    7

  8. 8.

    8

  9. 9.

    9

  10. 10.
  11. 11.

    10

  12. 12.

    11

  13. 13.

    12

  14. 14.

    13

  15. 15.

    14

  16. 16.
  17. 17.

    15

  18. 18.

    16

  19. 19.

    17

  20. 20.

    18

  21. 21.

    19

  22. 22.

    20

  23. 23.

    21

  24. 24.

    22

  25. 25.

    23

  26. 26.

    24

  27. 27.

    25

  28. 28.

    26

  29. 29.

    27

  30. 30.

    28

  31. 31.

    29

  32. 32.

    30

  33. 33.

    31

  34. 34.

    32

  35. 35.

    33

  36. 36.

    34

  37. 37.

    35

  38. 38.

    36

  39. 39.

    37

  40. 40.

    38

  41. 41.

    39

  42. 42.

    40

  43. 43.

    41

  44. 44.

    42

  45. 45.

    43

  46. 46.

    44

  47. 47.

    /// Model struct Cinnamon { let value: Int = 0

    } enum Event { case increase } 45
  48. 48.

    /// Model struct Cinnamon { let value: Int = 0

    } enum Event { case increase } func reducer(state: Cinnamon, event: Event) -> Cinnamon { var newState = state if event == .increase { newState.value += 1 } return newState } /// UI let builder = Form(state: Cinnamon(), reducer: reducer) 46
  49. 49.

    47

  50. 50.

    48

  51. 51.

    49

  52. 53.

    struct AddressBookApp { struct Data { var contacts: [Person] }

    var data: Data struct UI { var searchTerm: String var scrollPosition: Int } var ui: UI } 51
  53. 54.

    52

  54. 55.

    53

  55. 56.

    54

  56. 57.

    55

  57. 58.

    56

  58. 59.

    57

  59. 60.

    58

  60. 61.

    59

  61. 62.

    60

  62. 63.

    61

  63. 64.

    62

  64. 65.

    63

  65. 66.

    64

  66. 67.

    65

  67. 68.

    private var subscribers: [String: (State)->Void] = [:] public func subscribe(_

    subscriber: @escaping (State)->Void) -> String { let token = UUID().uuidString subscribers[token] = subscriber subscriber(state) return token } 66
  68. 69.

    67

  69. 70.

    protocol FormComponent { associatedtype State func setup(with state: State) func

    update(state: State) -> Void } public func subscribe<Component: FormComponent> (_ subscriber: Component) -> String where Component.State == State {... 68
  70. 71.

    69

  71. 72.

    func subscribe<Type: Equatable>( path: KeyPath<Data, Type>, action: @escaping (_ oldValue:

    Type, _ newValue: Type) -> Void ) -> String struct Person { let name: String } form.subscribe(path: \Person.name) { (old, new) in ... } 70
  72. 73.

    private var history: [State] = [] func apply(_ change: (inout

    State) -> Void) { states.append(state) change(&state) notifySubscribers() } func undo() { state = history.popLast() notifySubscribers() } 71
  73. 74.

    72

  74. 75.

    73

  75. 76.

    74

  76. 77.

    75

  77. 78.

    76

  78. 79.

    77

  79. 80.

    78

  80. 81.

    79

  81. 82.

    80