Communication Path between two States of the App

[jmgawecki]

Hey everyone. I am currently learning how to use Composable Architecture.

Based on the knowledge acquired with the Collection of videos A tour of the Composable Architecture, I am trying to build a very simple application. The application displays Apple's frameworks on a LazyVGrid. When you tap the single framework, I would like the view to present modally with the full description of that specific framework.

I've managed to build the screen:

I've created structure, enum, and structure for AppState, AppAction, and AppEnvironment respectively.
I've also created the same set for a single Framework (Framework, FrameworkAction, FrameworkEnvironment) respectively.

Now I can see two ways of displaying framework details modally. I can simply add property isSelected = false and toggle it every time I would like the details to be displayed or dismissed, and that can could be done directly from the frameworkReducer.

But I would like to add the property selectedFramework to the AppState and manage from there (present modally when the value of selectedFramework is not nil/ dismiss when the value is nil.

Sadly, I am not sure how to communicate with the AppState's selectedFramework property from FrameworkAction. I thought that I could use Effect, to fire off some AppAction, from FrameworkAction, but the types interfere with each other.

Any suggestions lads/lasses?

My code is very short so far, so If anyone would like to have look at what is going on, please go ahead, here is the link to my repository:
https://github.com/jmgawecki/CAApp

Thank you for any help!

[jmgawecki]

Quick update, I did manage to establish communication. Now I am facing another problem, and that is using .sheet to present the view modally.

.sheet(item: viewStore.binding( get: viewStore.selectedFramework, send: ) ), content:FrameworkDetailView.init(framework: viewStore.selectedFramework))
I am getting a lot of errors here. Is there a way, and if it is, would it be correct, to use .binding method without using .send parameter? I am actually not sure why would I need it at this point.

link to my repository: https://github.com/jmgawecki/CAApp

[jmgawecki]

One more question. As I understand, case .selectedFramework should be empty like that?

case .selectedFramework(let framework):
         return .none

Because setting selectedFramework = framework within that case does nothing.
I am still setting selectedFramework here:

case .framework(index: let index, frameworkAction: FrameworkAction.didTapFramework):
         state.selectedFramework = state.frameworks[index]
         return .none

If I do another way around, It does not work.

edit: I've just updated my GitHub, if you have time to have a look.

[tgrapperon]

No, it should set state.selecteFramework = framework as this action may be called by the system with nil when you dismiss the sheet interactively for example. The sheet initializer expects a Binding<Framework?>, that is something that can read or set frameworks. SwiftUI uses this binding to set the Framework to nil when you dismisses the sheet using a gesture for example. In TCA world, the setter role is played by an action sent to the viewStore. It may work in your case if you dismiss the sheet programmatically (i.e., you set the selected framework to nil yourself when a button is pushed), but you need to provide a path when dismissal is handled by SwiftUI.

BTW, you can perfectly have state.selecteFramework = framework in both cases. If it were more complex than this assignation, you could always return Effect(value: .selectedFramework(state.frameworks[index])) instead of performing the assignation in the .framework(index: frameworkAction: case.

I didn't have the time to look at the repo, sorry.

[jmgawecki]

So when dismissing a view by just sliding it to the bottom, there are no changes in a state, selectedFramework still has value. I gues I will have to handle it with .onDisappear(peform:). I would like to handle it from the FrameworkAction, case didCloseFramework:

enum FrameworkAction {
   case didTapFramework
   case didCloseFramework
   case didGoSafari
}

But looking at this piece of code, I am not entirely sure how to pass store: Store<Framework, FrameworkAction> to my FrameworkDetailView:

struct ContentView: View {
   let store: Store<AppState, AppAction>
   let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]
   var body: some View {
      WithViewStore(self.store) { viewStore in
         ScrollView {
            HStack {
               LazyVGrid(columns: columns, content: {
                  ForEachStore(
                     self.store.scope(
                        state: \.frameworks,
                        action: AppAction.framework(index:frameworkAction:)
                     ),
                     content: SmallView.init(store:)
                  )
               })
            }
            .sheet(item: viewStore.binding(
               get: \.selectedFramework,
               send: AppAction.selectedFramework(viewStore.selectedFramework)
            ), content: { FrameworkDetailView(store: <#Store<Framework, FrameworkAction>#>, framework: $0) })
         }
      }
   }
}

If the .sheet was performed within ForEachStore in SmallView, I could access it, but it's not. Any suggestion about this one? Thank you.

[tgrapperon]

In the TCA spirit, your Framework should be a closed domain, that is, a Framework(State), a FrameworkAction, a FrameworkEnvironment, a frameworkReducer which works on theses types, and potentially a FrameworkView which accepts a Store<FrameworkState, FrameworkAction>. This domain shouldn't have knowledge of the existence of the array of frameworks. It should be a closed and consistent universe. Please note that the action is a FrameworkAction, not an AppAction, as this is living in "another dimension", out of reach of the "Framework" domain.
It means that the existence of a selectedFramework is out of reach from the Framework domain.

Then you define the app domain, with its AppState, etc. This app domain has complete knowledge of the framework domains it embeds, and it manages their selection.
In your case, if no more treatment is realized in SmallView, I would loop with a regular ForEach over viewStore.frameworks, make SmallView accept a Frameworkin the initializer instead of a store, and embed it in aButtonin theForEach(or addonTapGesture`). The button (or onTap) would then send a ".selectedFramework" action with the framework sent as argument. Something like

ForEach(viewStore.frameworks, id: \.self) { framework in
  Button(action: { viewStore.send(.selectFramework(framework)) }) {
    SmallView(framework: framework)
  }
}

In your reducer, you don't looks to need a forEach, but you can pullback a Framework reducer for your selectedFramework (behind .optional()).
Back in your view, in the .sheet, you wrap your FrameworkDetailView in an IfLetStore like

IfLetStore(store.scope(state: \.selectedFramework, action: AppAction.selectedFramework)) { 
  FrameworkDetailView(store: $0)
}

(FrameworkDetailView doesn't looks like to need a framework argument for the initializer). Here, AppAction is like

enum AppAction {
  case selectFramework(Framework)
  case selectedFramework(FrameworkAction)
  ...
}

You can always convert to use a forEachStore later if needed, but I'm feeling you don't have to in your case right now.

[jmgawecki]

Hey Thomas, I solved it with your and someone else's help using forEach operator and IfLetStore. Thanks!

[jmgawecki]

Thanks to Thomas and Brandon.
Solution for that issue:

AppState and AppAction

struct AppState: Equatable {
   var frameworks: [Framework] = MockData.frameworks
   var selectedFramework: Framework?
}

enum AppAction: Equatable {
   case framework(index: Int, frameworkAction: FrameworkAction)
   case selectedFramework(Framework?)
   case dismissFrameworkDetailView
   case frameworkDetailView(FrameworkAction)
}

Piece of the appReducer taking part in .sheet( method

case .selectedFramework(let framework):
         state.selectedFramework = framework
         return .none
         
      case .dismissFrameworkDetailView:
         state.selectedFramework = nil
         return .none
         
      case .frameworkDetailView:
         return .none

Content of .sheet

.sheet(
               item: viewStore.binding(
                  get: \.selectedFramework,
                  send: .dismissFrameworkDetailView
               )) { _ in 
               IfLetStore(
                  self.store.scope(
                     state: \.selectedFramework,
                     action: AppAction.frameworkDetailView
                  ),
                  then: FrameworkDetailView.init(store:)
               )
            }