Implementing Stepper with TCA

[konrain]

Describe the bug
There does not seem to be a way to implement a stepper if the state value is an Array. Because the index cannot be passed when using a binding.

View

ForEach(0..<viewStore.items.count, id: \.self) { index in
  Stepper(value: viewStore.binding(get: \.items[index].value, send: .changeValue)) <---- cannot pass index (will overwrite stepper value)
}

Reducer:

case .changValue(let newValue): <---- cannot take index here
state.items[index].value = newValue  
return .none

Workaround would be to use onIncrement & onDecrement, but docs indicate that is not possiable.

"If you create a Stepper via the Stepper.init(onIncrement:onDecrement:label:) initializer
inside a WithViewStore it will behave erratically."

Environment

• Xcode [12.5]
• Swift [5]
• OS: iOS 14

[mbrandonw]

Hi @konrain,

You can always construct a binding from scratch that sends actions under the hood rathe than performing mutations:

ForEach(0..<viewStore.items.count, id: \.self) { index in
  Stepper(
    value: viewStore.binding(
      get: { viewStore.items[index].value }, 
      set: { viewStore.send(.changeValue(index, $0)) }
    )
  )
}

You can also use the ForEachStore, which is like ForEach but instead gives you stores scoped at each index:

ForEachStore(
  store.scope(state: \.items, action: AppAction.changeValue),
  id: \.self
) { indexedStore in
  WithViewStore(indexedStore) { indexedViewStore in 
    Stepper(
      value: indexedViewStore(
        get: { $0 },
        send: StepperAction.changeValue
      )
    )
  }
}

This is only a sketch. For more info on how ForEachStore works I recommend you watch our episode where we apply it to a todo app.

And finally, there's a chance that the Stepper bug has been fixed in recent versions of SwiftUI. Have you tried it out?

[mbrandonw]

Also I just transferred this to our GitHub Discussions as it's more appropriate there.

[konrain]

Thanks a lot @mbrandonw, I did try the other Stepper method. I'm not sure what the exact issue is so I'm unable to debug when the behavior happens. It seems to be working for my simple use case but I didn't want it to behave erratically unexpectedly as I continue to develop.

[mbrandonw]

Here is the feedback I filed for the issue: https://gist.github.com/mbrandonw/dee2ceac2c316a1619cfdf1dc7945f66

It seems that it is still a problem, as of Xcode 12.4 :/ So I would say stay away from that initializer. Another way you can work around it (in addition to what I outlined above) is to not use WithViewStore and instead bind a ViewStore directly in the view, like is done here.