onRecieve is printing multiple times for each view update

[satanworker]

Hey! I'm building my first app with CA and it worked really well, until I saw the problem with view recalculating multiple for each state update. I understood the problem with scoped stores and optimizing for it, but I still don't understand is it possible to subscribe to onRecieve of only 1 property of viewStore or what it is the best way to react to store updates in the view?

import SwiftUI
import ComposableArchitecture

struct TestState: Equatable {
    var firstTimer: Int
    var secondTimer: Int
}

enum TestAction {
    case updateFirstTimer
    case updateSecondTimer
}

struct TestEnvironment {}

let testReducer = Reducer<TestState, TestAction, TestEnvironment> { state, action, environ in
    switch action {
    case .updateFirstTimer:
        state.firstTimer += 1
        return .none
    case .updateSecondTimer:
        state.secondTimer += 1
        return .none
    }
    
}


let store = Store(
    initialState: TestState.init(firstTimer: 0, secondTimer: 0),
    reducer: testReducer,
    environment: TestEnvironment()
)

struct TestView: View {
    var body: some View {
        WithViewStore(store) { viewStore in
            VStack {
                Text("firstTimer \(viewStore.firstTimer)")
                Text("secondTimer \(viewStore.secondTimer)")
                Button("IncrementFirstOne") {
                    viewStore.send(.updateFirstTimer)
                }
                Button("IncrementSecondOne") {
                    viewStore.send(.updateSecondTimer)
                }
            }
            .onReceive(viewStore.publisher, perform: { firstTimerValue in
                // it's prining twice for each store update
                print("first timer value \(firstTimerValue)")
            })
        }
    }
}

that is the minimal example with the problem. ideally I want to have 2 separate onRecieve when firstTimer value updates and another one for secondTimer value updates

and here goes the video where you can see print being executed twice. Thank you so much in advance 🙇‍♂️
https://user-images.githubusercontent.com/11026240/130346768-9a2794c1-fad1-4705-a651-bb671a2b3cad.mov

[iampatbrown]

Hey Dmitry :)
Part of the problem is that onReceive is inside WithViewStore. This means it will be recreated whenever state changes, which will occur when either of the timer values change. Keep in mind onReceive is going to emit the initial value as the view appears as well.

Here is an example to highlight how state changes are going to impact your view.

struct TestView: View {
  var body: some View {
    VStack {
      WithViewStore(store.scope(state: \.firstTimer)) {
        Text("firstTimer \($0.state)")
      }

      WithViewStore(store.scope(state: \.secondTimer)) {
        Text("secondTimer \($0.state)")
      }

      WithViewStore(store.stateless) { actions in
        Button("IncrementFirstOne") {
          actions.send(.updateFirstTimer)
        }

        Button("IncrementSecondOne") {
          actions.send(.updateSecondTimer)
        }
      }
      .onReceive(
        ViewStore(store).publisher.firstTimer
        perform: { print("first timer value \($0)") }
      )
      .onReceive(
        ViewStore(store).publisher.secondTimer,
        perform: { print("second timer value \($0)") }
      )
    }
  }
}

See how the VStack doesn't contain any state which will cause it to be redrawn. This means the onReceive modifiers are only called once. This is also true for the Buttons because the the actions viewStore is stateless.

In terms of reacting to state changes, normally I would do this in the reducer. I think using the ViewStore(store).publisher would work fine for you though.

Let me know if this makes sense.

[satanworker]

😭😭 that is pure magic! Thank you so much! As it usually happens I also found that .dropFirst will do the same thing! But your approach is a lot better! Thank you for your hard work

[iampatbrown]

No worries. Using print statements, especially on the publishers, can help to see what's going on :) eg.

struct TestView: View {
  var body: some View {
    WithViewStore(store) { viewStore in
      let _ = print("WithViewStore.body rendered")
      VStack {
        Text("firstTimer \(viewStore.firstTimer)")
        Text("secondTimer \(viewStore.secondTimer)")
        Button("IncrementFirstOne") {
          viewStore.send(.updateFirstTimer)
        }
        Button("IncrementSecondOne") {
          viewStore.send(.updateSecondTimer)
        }
      }
      .onReceive(
        viewStore.publisher.firstTimer.dropFirst().print(" 1.publisher.firstTimer"),
        perform: { firstTimerValue in
          print("\n 1. first timer value \(firstTimerValue)" + "\n")
        }
      )
      .onReceive(
        viewStore.publisher.secondTimer.dropFirst().print(" 2.publisher.secondTimer"),
        perform: { secondTimerValue in
          print("\n 2. second timer value \(secondTimerValue)" + "\n")
        }
      )
    }
  }
}