How to MVI?

Presented on April '18 at BlrDroid 101.
https://www.meetup.com/blrdroid/events/249149873/

Transcript

1. How to MVI? Ragunath Jawahar ragunathjawahar / Medium • Twitter • GitHub
2. *This statement is architecture / platform agnostic
3. Why? Courtesy pexels.com/@goumbik
4. Why?
5. Background 1. Several iterations since April ’17 2. Maximize testability and minimize code 3. Offline-first app with device capabilities 4. Both Android and iOS
6. Testing Goals UI Tests Instrumented Tests Unit Tests **Not to scale
7. Testing Goals UI Tests Instrumented Tests Unit Tests **Not to scale
8. Testing Goals UI Tests Instrumented Tests Unit Tests **Not to scale
9. Testing Goals UI Tests Instrumented Tests Unit Tests **Not to scale
10. Benefits 1. Predictable 2. Platform Agnostic 3. User-centric 4. Reactive (Responsive / Resilient / Elastic / Message Driven) 5. Unidirectional
11. Model Presenter View
12. Toolbox (Subjective) • Kotlin • RxJava • RxAndroid • RxKotlin (Optional) • RxBinding • Retrofit • Room / SQL Brite • JUnit • Truth • Mockito • Espresso
13. Model • View • Intention
14. View Model Intention
15. EVERYTHING IS A STREAM Courtesy parkerblog.wordpress.com
16. Intention
17. Intent(ion) is a component whose sole responsibility is to translate user input events into model-friendly events. —André Staltz
18. Intent(ion) is a component whose sole responsibility is to translate user input events into model-friendly events. —André Staltz
19. Intent(ion) is a component whose sole responsibility is to translate user input events into model-friendly events. —André Staltz
20. View Model Intention
23. CounterIntentions.kt
24. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
25. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
26. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
27. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
28. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
29. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
30. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
31. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
32. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
33. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
34. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
35. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
36. class CounterIntentions( private val incrementClicks: Observable<Unit>, private val incrementBy5Clicks: Observable<Unit>, private val decrementClicks: Observable<Unit>, private val resetClicks: Observable<Unit> ) { fun increment(): Observable<Int> = incrementClicks.map { +1 } // increment by 5 … fun decrement(): Observable<Int> = decrementClicks.map { -1 } fun reset(): Observable<Unit> = resetClicks }
37. Testing?
38. Model
39. View Model Intention
40. Courtesy 123Countries.com State Model
41. (Single Atom) State • Represents the state of your model • Should be normalized • UI state can always be derived from SAS, but not the other way around
42. State Reducer Reducer State New State Signal
43. CounterState.kt
44. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
45. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
46. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
47. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
48. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
49. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
50. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
51. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
52. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
53. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
54. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
55. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
56. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
57. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
58. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
59. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
60. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
61. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
62. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
63. @Parcelize data class CounterState( val counter: Int ) : Parcelable { companion object { val ZERO = CounterState(0) } fun add(number: Int): CounterState = this.copy(counter = counter + number) fun reset(): CounterState = CounterState.ZERO }
64. CounterModel.kt
65. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
66. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
67. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
68. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
69. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
70. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
71. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
72. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
73. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
74. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
75. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
76. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
77. object CounterModel { fun bind( intentions: CounterIntentions, bindings: Observable<Binding>, states: Observable<CounterState> ): Observable<CounterState> { val numbers = Observable.merge( intentions.increment(), intentions.incrementBy5(), intentions.decrement() ) return Observable.merge( newBindingUseCase(bindings), restoredBindingUseCase(bindings, states), incrementDecrementUseCase(numbers, states), resetUseCase(intentions.reset()) ) } // More functions… }
78. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
79. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
80. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
81. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
82. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
83. Use Case - New Binding private fun newBindingUseCase( bindings: Observable<Binding> ): Observable<CounterState> { return bindings .filter { it == Binding.NEW } .map { CounterState.ZERO } }
84. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
85. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
86. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
87. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
88. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
89. Use Case - Restored Binding private fun restoredBindingUseCase( bindings: Observable<Binding>, states: Observable<CounterState> ): ObservableSource<CounterState> { return bindings .filter { it == Binding.RESTORED } .withLatestFrom(states) { _, previousState -> previousState } }
90. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
91. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
92. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
93. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
94. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
95. Use Case - Increment / Decrement private fun incrementDecrementUseCase( numbers: Observable<Int>, states: Observable<CounterState> ): Observable<CounterState> { return numbers.withLatestFrom(states) { number, previousState -> previousState.add(number) } }
96. Use Case - Reset private fun resetUseCase( reset: Observable<Unit> ): Observable<CounterState> { return reset.map { CounterState.ZERO } }
97. Use Case - Reset private fun resetUseCase( reset: Observable<Unit> ): Observable<CounterState> { return reset.map { CounterState.ZERO } }
98. Use Case - Reset private fun resetUseCase( reset: Observable<Unit> ): Observable<CounterState> { return reset.map { CounterState.ZERO } }
99. Use Case - Reset private fun resetUseCase( reset: Observable<Unit> ): Observable<CounterState> { return reset.map { CounterState.ZERO } }
100. Use Case - Reset private fun resetUseCase( reset: Observable<Unit> ): Observable<CounterState> { return reset.map { CounterState.ZERO } }
101. Don’t scan() (Recommendation) • Introduces additional abstraction because it requires homogeneous streams
102. View
103. View Model Intention
104. CounterView.kt
105. interface CounterView { fun displayCounter(value: Int) }
106. interface CounterView { fun displayCounter(value: Int) }
107. CounterViewDriver.kt
108. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
109. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
110. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
111. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
112. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
113. class CounterViewDriver : ViewDriver<CounterView, CounterState> { override fun render(view: CounterView, state: CounterState) { view.displayCounter(state.counter) } }
114. Learnings • RxJava yields better results with a reactive architecture • You don’t need lifecycle events (most of the time) • UI tests are necessary • Collaboration between mobile teams is possible and fun
115. Pros • Wholistic • Testable • Easy to debug • Reduction in the number of unknowns
116. Cons
117. Cons In Words • Learning curve • Buy-in from team / tech leaders • Hiring (as of today)
119. References • https://www.youtube.com/watch?v=1zj7M1LnJV4 • https://cycle.js.org/getting-started.html • https://egghead.io/courses/cycle-js-fundamentals • https://redux.js.org • https://egghead.io/courses/getting-started-with-redux • https://github.com/ragunathjawahar/kitchen-sink
120. Medium • Twitter • GitHub @ragunathjawahar