Add ViewStore.send(_:animation:). (#392)

Author: mluisbrown

Examples/CaseStudies/SwiftUICaseStudies/01-GettingStarted-Animations.swift

@@ -13,6 +13,9 @@ private let readMe = """
 
   To animate changes made to state through a binding, use the `.animation` method on `Binding`.
 
+  To animate asynchronous changes made to state via effects, use the `.animation` method provided \
+  by the CombineSchedulers library to receive asynchronous actions in an animated fashion.
+
   Try it out by tapping or dragging anywhere on the screen to move the dot, and by flipping the \
   toggle at the bottom of the screen.
   """
@@ -64,7 +67,7 @@ let animationsReducer = Reducer<AnimationsState, AnimationsAction, AnimationsEnv
     return .keyFrames(
       values: [Color.red, .blue, .green, .orange, .pink, .purple, .yellow, .white]
         .map { (output: .setColor($0), duration: 1) },
-      scheduler: environment.mainQueue
+      scheduler: environment.mainQueue.animation(.linear)
     )
 
   case let .setColor(color):
@@ -91,7 +94,6 @@ struct AnimationsView: View {
 
             Circle()
               .fill(viewStore.circleColor)
-              .animation(.linear)
               .blendMode(.difference)
               .frame(width: 50, height: 50)
               .scaleEffect(viewStore.isCircleScaled ? 2 : 1)
@@ -104,9 +106,10 @@ struct AnimationsView: View {
           .background(self.colorScheme == .dark ? Color.black : .white)
           .simultaneousGesture(
             DragGesture(minimumDistance: 0).onChanged { gesture in
-              withAnimation(.interactiveSpring(response: 0.25, dampingFraction: 0.1)) {
-                viewStore.send(.tapped(gesture.location))
-              }
+              viewStore.send(
+                .tapped(gesture.location),
+                animation: .interactiveSpring(response: 0.25, dampingFraction: 0.1)
+              )
             }
           )
           Toggle(
@@ -117,7 +120,7 @@ struct AnimationsView: View {
               .animation(.interactiveSpring(response: 0.25, dampingFraction: 0.1))
           )
           .padding()
-          Button("Rainbow") { viewStore.send(.rainbowButtonTapped) }
+          Button("Rainbow") { viewStore.send(.rainbowButtonTapped, animation: .linear) }
             .padding([.leading, .trailing, .bottom])
         }
       }

Examples/CaseStudies/SwiftUICaseStudies/02-Effects-Timers.swift

@@ -40,7 +40,10 @@ let timersReducer = Reducer<TimersState, TimersAction, TimersEnvironment> {
     state.isTimerActive.toggle()
     return state.isTimerActive
       ? Effect.timer(
-        id: TimerId(), every: .seconds(1), tolerance: .seconds(0), on: environment.mainQueue
+        id: TimerId(),
+        every: .seconds(1),
+        tolerance: .seconds(0),
+        on: environment.mainQueue.animation(.interpolatingSpring(stiffness: 3000, damping: 40))
       )
       .map { _ in TimersAction.timerTicked }
       : Effect.cancel(id: TimerId())
@@ -97,7 +100,6 @@ struct TimersView: View {
           }
           .stroke(Color.black, lineWidth: 3)
           .rotationEffect(.degrees(Double(self.viewStore.secondsElapsed) * 360 / 60))
-          .animation(Animation.interpolatingSpring(stiffness: 3000, damping: 40))
         }
       }
       .frame(width: 280, height: 280)

Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-ElmLikeSubscriptions.swift

@@ -66,7 +66,12 @@ let clockReducer = Reducer<ClockState, ClockAction, ClockEnvironment>.combine(
     return [
       TimerId():
         Effect
-        .timer(id: TimerId(), every: .seconds(1), tolerance: .seconds(0), on: environment.mainQueue)
+        .timer(
+          id: TimerId(),
+          every: .seconds(1),
+          tolerance: .seconds(0),
+          on: environment.mainQueue.animation(.interpolatingSpring(stiffness: 3000, damping: 40))
+        )
         .map { _ in .timerTicked }
     ]
   }
@@ -120,7 +125,6 @@ struct ClockView: View {
           }
           .stroke(Color.black, lineWidth: 3)
           .rotationEffect(.degrees(Double(self.viewStore.secondsElapsed) * 360 / 60))
-          .animation(Animation.interpolatingSpring(stiffness: 3000, damping: 40))
         }
       }
       .frame(width: 280, height: 280)

Examples/Todos/Todos/Todos.swift

@@ -73,17 +73,12 @@ let appReducer = Reducer<AppState, AppAction, AppEnvironment>.combine(
     case .todo(id: _, action: .checkBoxToggled):
       struct TodoCompletionId: Hashable {}
       return Effect(value: .sortCompletedTodos)
-        .debounce(id: TodoCompletionId(), interval: 1, scheduler: environment.mainQueue)
+        .debounce(id: TodoCompletionId(), interval: 1, scheduler: environment.mainQueue.animation())
 
     case .todo:
       return .none
     }
-  },
-  todoReducer.forEach(
-    state: \.todos,
-    action: /AppAction.todo(id:action:),
-    environment: { _ in TodoEnvironment() }
-  )
+  }
 )
 
 .debugActions(actionFormat: .labelsOnly)
@@ -103,7 +98,7 @@ struct AppView: View {
           WithViewStore(self.store.scope(state: { $0.filter }, action: AppAction.filterPicked)) {
             filterViewStore in
             Picker(
-              "Filter", selection: filterViewStore.binding(send: { $0 })
+              "Filter", selection: filterViewStore.binding(send: { $0 }).animation()
             ) {
               ForEach(Filter.allCases, id: \.self) { filter in
                 Text(filter.rawValue).tag(filter)
@@ -126,9 +121,11 @@ struct AppView: View {
         .navigationBarItems(
           trailing: HStack(spacing: 20) {
             EditButton()
-            Button("Clear Completed") { viewStore.send(.clearCompletedButtonTapped) }
-              .disabled(viewStore.isClearCompletedButtonDisabled)
-            Button("Add Todo") { viewStore.send(.addTodoButtonTapped) }
+            Button("Clear Completed") {
+              viewStore.send(.clearCompletedButtonTapped, animation: .default)
+            }
+            .disabled(viewStore.isClearCompletedButtonDisabled)
+            Button("Add Todo") { viewStore.send(.addTodoButtonTapped, animation: .default) }
           }
         )
         .environment(

Examples/VoiceMemos/VoiceMemos/VoiceMemos.swift

@@ -212,13 +212,7 @@ struct VoiceMemosView: View {
                 .foregroundColor(Color(.label))
                 .frame(width: 74, height: 74)
 
-              Button(
-                action: {
-                  withAnimation(.spring()) {
-                    viewStore.send(.recordButtonTapped)
-                  }
-                }
-              ) {
+              Button(action: { viewStore.send(.recordButtonTapped, animation: .spring()) }) {
                 RoundedRectangle(cornerRadius: viewStore.currentRecording != nil ? 4 : 35)
                   .foregroundColor(Color(.systemRed))
                   .padding(viewStore.currentRecording != nil ? 17 : 2)

Package.swift

@@ -17,7 +17,7 @@ let package = Package(
     )
   ],
   dependencies: [
-    .package(url: "https://github.com/pointfreeco/swift-case-paths", from: "0.1.1"),
+    .package(url: "https://github.com/pointfreeco/swift-case-paths", from: "0.1.3"),
     .package(url: "https://github.com/ReactiveCocoa/ReactiveSwift", from: "6.4.0"),
   ],
   targets: [

Sources/ComposableArchitecture/SwiftUI/Animation.swift

@@ -0,0 +1,14 @@
+import SwiftUI
+
+extension ViewStore {
+  /// Sends an action to the store with a given animation.
+  ///
+  /// - Parameters:
+  ///   - action: An action.
+  ///   - animation: An animation.
+  public func send(_ action: Action, animation: Animation?) {
+    withAnimation(animation) {
+      self.send(action)
+    }
+  }
+}