Basics of composition in the "essentials" tutorial (#2659)

* New tutorial section for composing features.

* wip

* wip

* wip

* wip

* wip

* wip

* fix

---------

Co-authored-by: Stephen Celis <[email protected]>

Author: mbrandonw

Sources/ComposableArchitecture/Documentation.docc/Articles/Performance.md

@@ -508,6 +508,28 @@ case .startButtonTapped:
 This greatly reduces the bandwidth of actions being sent into the system so that you are not 
 incurring unnecessary costs for sending actions.
 
+Another example that comes up often is sliders. If done in the most direct way, by deriving a 
+binding from the view store to hand to a `Slider`:
+
+```swift
+Slider(value: viewStore.$opacity, in: 0...1)
+```
+
+This will send an action into the system for every little change to the slider, which can be dozens
+or hundreds of actions as the user is dragging the slider. If this turns out to be problematic then
+you can consider alternatives.
+
+For example, you can hold onto some local `@State` in the view for using with the `Slider`, and
+then you can use the trailing `onEditingChanged` closure to send an action to the store:
+
+```swift
+Slider(value: self.$opacity, in: 0...1) {
+  self.store.send(.setOpacity(self.opacity))
+}
+```
+
+This way an action is only sent once the user stops moving the slider.
+
 ### Compiler performance
 
 In very large SwiftUI applications you may experience degraded compiler performance causing long

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-01-code-0001.swift

@@ -0,0 +1,9 @@
+import SwiftUI
+
+struct AppView: View {
+  var body: some View {
+    TabView {
+    
+    }
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-01-code-0002.swift

@@ -0,0 +1,17 @@
+import SwiftUI
+
+struct AppView: View {
+  var body: some View {
+    TabView {
+      CounterView(store: ???)
+        .tabItem {
+          Text("Counter 1")
+        }
+
+      CounterView(store: ???)
+        .tabItem {
+          Text("Counter 2")
+        }
+    }
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-01-code-0003.swift

@@ -0,0 +1,21 @@
+import ComposableArchitecture
+import SwiftUI
+
+struct AppView: View {
+  let store1: StoreOf<CounterFeature>
+  let store2: StoreOf<CounterFeature>
+
+  var body: some View {
+    TabView {
+      CounterView(store: store1)
+        .tabItem {
+          Text("Counter 1")
+        }
+
+      CounterView(store: store2)
+        .tabItem {
+          Text("Counter 2")
+        }
+    }
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0001.swift

@@ -0,0 +1,6 @@
+import ComposableArchitecture
+
+@Reducer
+struct AppFeature {
+  
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0002.swift

@@ -0,0 +1,13 @@
+import ComposableArchitecture
+
+@Reducer
+struct AppFeature {
+  struct State {
+    var tab1 = CounterFeature.State()
+    var tab2 = CounterFeature.State()
+  }
+  enum Action {
+    case tab1(CounterFeature.Action)
+    case tab2(CounterFeature.Action)
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0003.swift

@@ -0,0 +1,19 @@
+import ComposableArchitecture
+
+@Reducer
+struct AppFeature {
+  struct State {
+    var tab1 = CounterFeature.State()
+    var tab2 = CounterFeature.State()
+  }
+  enum Action {
+    case tab1(CounterFeature.Action)
+    case tab2(CounterFeature.Action)
+  }
+  var body: some ReducerOf<Self> {
+    Reduce { state, action in 
+      // Core logic of the app feature
+      return .none
+    }
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0004.swift

@@ -0,0 +1,25 @@
+import ComposableArchitecture
+
+@Reducer
+struct AppFeature {
+  struct State {
+    var tab1 = CounterFeature.State()
+    var tab2 = CounterFeature.State()
+  }
+  enum Action {
+    case tab1(CounterFeature.Action)
+    case tab2(CounterFeature.Action)
+  }
+  var body: some ReducerOf<Self> {
+    Scope(state: \.tab1, action: \.tab1) {
+      CounterFeature()
+    }
+    Scope(state: \.tab2, action: \.tab2) {
+      CounterFeature()
+    }
+    Reduce { state, action in 
+      // Core logic of the app feature
+      return .none
+    }
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0005.swift

@@ -0,0 +1,8 @@
+import ComposableArchitecture
+import XCTest
+
+class AppFeatureTests: XCTestCase {
+  func testIncrementInFirstTab() {
+  
+  }
+}

Sources/ComposableArchitecture/Documentation.docc/Tutorials/MeetTheComposableArchitecture/01-Essentials/04-ComposingFeatures/01-04-02-code-0006.swift

@@ -0,0 +1,10 @@
+import ComposableArchitecture
+import XCTest
+
+class AppFeatureTests: XCTestCase {
+  func testIncrementInFirstTab() {
+    let store = TestStore(initialState: AppFeature.State()) {
+      AppFeature()
+    }
+  }
+}