DragGesture View dont update after update ReducerProtocal

[saroar]

Before ReducerProtocal

public struct DayWordCardsView: View {

  let store: Store<DayWordCardsState, DayWordCardsAction>
  @ObservedObject var viewStore: ViewStore<DayWordCardsState, DayWordCardsAction>
  
  struct ViewState: Equatable {
    init(state: DayWordCardsState) {
      self.dayWordCardStates = state.dayWordCardStates
    }
    
    let dayWordCardStates: IdentifiedArrayOf<DayWordCardState>
  }

  public init(store: Store<DayWordCardsState, DayWordCardsAction>) {
    self.store = store
    self.viewStore = ViewStore(store)
  }

  public var body: some View {
    VStack {
      GeometryReader { geometry in
          VStack {
            ZStack {
              ForEachStore(
                self.store.scope(
                  state: \DayWordCardsState.dayWordCardStates,
                  action: DayWordCardsAction.word
                )
              ) { wordStore in
                  self.cardView(
                    store: wordStore,
                    cardCount: viewStore.dayWordCardStates.count,
                    geometry: geometry
                  )
              }
            }
            Spacer()
          }
      }
    }
    .onAppear {
        viewStore.send(.onAppear)
    }
  }

  func cardView(
    store: Store<DayWordCardState, DayWordCardAction>,
    cardCount: Int, geometry: GeometryProxy
  ) -> some View {
    
    WithViewStore(store.scope(state: \.id)) { viewStore in
      let id = viewStore.state
      let offset = CGFloat(cardCount - 1 - id) * 10
      let cardWidth = geometry.size.width - offset
      let cardOffset = CGFloat(cardCount - 1 - id) * 10
      
      DayWordCardView(store: store)
            .padding()
            .animation(.spring())
            .frame(width: cardWidth, height: 400)
            .offset(x: 0, y: cardOffset)
    } 
  }
}

After ReducerProtocal

public struct DayWordCardsView: View {

    let store: StoreOf<DayWordCards>
    @ObservedObject var viewStore: ViewStore<ViewState, DayWordCards.Action>

    struct ViewState: Equatable {
      init(state: DayWordCards.State) {
        self.dayWordCardStates = state.dayWordCardStates
      }

      let dayWordCardStates: IdentifiedArrayOf<DayWordCard.State>
    }

    public init(store: StoreOf<DayWordCards>) {
      self.store = store
      self.viewStore = ViewStore(self.store.scope(state: ViewState.init))
    }

    public var body: some View {
        VStack {
            GeometryReader { geometry in
                VStack {
                    ZStack {
                        ForEachStore(
                            self.store.scope(
                                state: \.dayWordCardStates,
                                action: DayWordCards.Action.word
                            )
                        ) { wordStore in
                            self.cardView(
                                store: wordStore,
                                cardCount: viewStore.dayWordCardStates.count,
                                geometry: geometry
                            )
                        }
                    }
                    Spacer()
                }
            }
        }
        .onAppear {
            viewStore.send(.onAppear)
        }
    }

  func cardView(
    store: StoreOf<DayWordCard>,
    cardCount: Int, geometry: GeometryProxy
  ) -> some View {
    
    WithViewStore(store.scope(state: \.id)) { viewStore in
      let id = viewStore.state
      let offset = CGFloat(cardCount - 1 - id) * 10
      let cardWidth = geometry.size.width - offset
      let cardOffset = CGFloat(cardCount - 1 - id) * 10
      
      DayWordCardView(store: store)
            .padding()
            .animation(.spring())
            .frame(width: cardWidth, height: 400)
            .offset(x: 0, y: cardOffset)
    }
  }
}

[saroar]

Screen.Recording.2022-10-19.at.10.13.06.mov

[saroar]

my card view

public struct DayWordCardView: View {

  let store: StoreOf<DayWordCard>
  @ObservedObject var viewStore: ViewStoreOf<DayWordCard>

  public init(store: StoreOf<DayWordCard>) {
      self.store = store
      self.viewStore = ViewStore(store)
  }

    fileprivate func english() -> some View {
        Group {
            Text("\(viewStore.word.englishTitle)")
                .font(.title).bold()
                .foregroundColor(.black)
                .padding([.top, .leading, .trailing], 16)
            
            Text("\(viewStore.word.englishDefinition)")
                .font(.body)
                .foregroundColor(.black)
                .padding([.bottom, .leading, .trailing], 16)
        }
    }
    
    fileprivate func russian() -> some View {
        Group {
            Text("\(viewStore.word.russianTitle ?? "")")
                .font(.title).bold()
                .foregroundColor(.black)
                .padding([.top, .leading, .trailing], 16)
            Text("\(viewStore.word.russianDefinition ?? "")")
               .font(.body)
               .foregroundColor(.black)
               .padding([.bottom, .leading, .trailing], 16)
        }
    }
    
    fileprivate func bangla() -> some View {
        Group {
            Text("\(viewStore.word.banglaTitle ?? "")")
                .font(.title).bold()
                .foregroundColor(.black)
                .padding([.top, .leading, .trailing], 16)
            Text("\(viewStore.word.banglaDefinition ?? "")")
               .font(.body)
               .foregroundColor(.black)
               .padding([.bottom, .leading, .trailing], 16)
        }
    }
    
    public var body: some View {
    // 1
        GeometryReader { geometry in
          VStack(alignment: .leading) {
              if viewStore.from == "english" {
                  english()
                  Divider()
                  if viewStore.to == "russian" {
                      russian()
                  }

                  if viewStore.to == "bangla" {
                      bangla()
                  }
              }

              if viewStore.from == "russian" {
                  russian()
                  Divider()

                  if viewStore.to == "english" {
                      english()
                  }

                  if viewStore.to == "bangla" {
                      bangla()
                  }

              }

              if viewStore.from == "bangla" {
                  bangla()

                  Divider()

                  if viewStore.to == "english" {
                      english()
                  }

                  if viewStore.to == "russian" {
                      russian()
                  }
              }
              Spacer()
          }
          .padding(.bottom)
          .background(Color.white)
          .cornerRadius(10)
          .shadow(radius: 5)
          .offset(x: viewStore.translation.width, y: viewStore.translation.height)
          .animation(.interactiveSpring())
          .rotationEffect(
            .degrees(Double(viewStore.translation.width / geometry.size.width) * 25),
            anchor: .bottom
          )
          .gesture(
            DragGesture()
              .onChanged { value in
                viewStore.send(.onChanged(value.translation))
              }.onEnded { value in
                viewStore.send(.getGesturePercentage(geometry, value))
              }
          )
        }
      }
}

[mbrandonw]

Hi @saroar, the before and after code samples you originally posted does not show a direct translation from the Reducer struct to the ReducerProtocol. The before does not make use of any view state, but the after does:

I would try undoing that and seeing if it works.

[saroar]

Is there something else I can try without go back to ‘Reducer’

[tgrapperon]

Hey @saroar, from the very little I can see from your video, the state doesn't seem to change when receiving the action. I would make sure that the action is correctly extracted and that the part where the translation is saved to your state is activated.
It is possible that you made a small mistake during the conversion, but it is also possible that you're hitting a bug regarding action extraction. Can you copy/paste your Action type, and ideally the Reducer itself?

[saroar]

@tgrapperon thanks for trying to help here full code of this function
Archive.zip

[tgrapperon]

From a quick look around, you're missing .forEach after your Reduce {} reducer in DayWordCards:

var body: some ReducerProtocol<State, Action> {
  Reduce { 
    …
  }.forEach(\.dayWordCardStates, action: /Action.word) {
    DayWordCard()
  }
}

This is the equivalent to the former

dayWordCard.forEach(state: \.dayWordCardStates, action: /DayWordCardsAction.word, environment: {…})

Without it, your individual DayWordCard.Actions are not processed by their corresponding DayWordCard reducer.

[saroar]

thanks a lots yes all is work now as expected love you guys for your help @mbrandonw @tgrapperon