How to implement multiple recursive navigations?

[toomozoo]

I would like to implement like Twitter navigation that allows users to go back and forth between user pages and tag searches.

• User profile -> Tag search -> User profile ...
• User profile -> Tag search -> Tag search ...
• User profile -> User profile -> Tag search -> User profile ...
• User profile -> Following -> User profile -> Tag search -> User profile -> Following ...
• User profile -> Following -> User profile -> Followers -> User profile -> Tag search -> User profile ...

I checked 04-HigherOrderReducers-Recursion.swift and could implement one recursive navigation such as:

• NestedView -> NestedView -> NestedView ...

I updated 04-HigherOrderReducers-Recursion.swift and add AnotherNestedState, but I couldn't implement such as:

• NestedView -> AnotherNestedView -> NestedView -> AnotherNestedView ...
• NestedView -> NestedView -> AnotherNestedView -> NestedView -> NestedView ...
• NestedView -> NestedView -> AnotherNestedView -> AnotherNestedView -> NestedView ...

How to go to NestedView from AnotherNestedView ? I couldn't set a variable for NestedState in AnotherNestedState.

# https://gist.github.com/toomozoo/3a59663baec44dcf0429fa4aa9a31565
struct AnotherNestedState: Equatable, Identifiable {
  let id: UUID
  var count: Int = 0
  var children: IdentifiedArrayOf<AnotherNestedState> = []

  // Error: `Value type 'AnotherNestedState' cannot have a stored property that recursively contains it`
  // var nestedState: NestedState? = nil

  // I can declare this, but `node2` in Action raise `Circular reference`.
  var children2: IdentifiedArrayOf<NestedState> = []
}

indirect enum AnotherNestedAction: Equatable {
  case append
  case buttonTapped
  case node(id: AnotherNestedState.ID, action: AnotherNestedAction)
  case onAppear

  // Error: `Circular reference`
  // case node2(id: NestedState.ID, action: NestedAction)
}

And I can't handle some actions like belows:

• [OK] NestedView -> AnotherNestedState -> Tap Count up button
• [NG] NestedView -> NestedView -> AnotherNestedState -> Tap Count up button
• [NG] NestedView -> NestedView -> NestedView -> AnotherNestedState -> Tap Count up button
• [?] NestedView -> AnotherNestedState -> NestedView -> AnotherNestedState -> Tap Count up button
  • I couldn't check this because of error above

First case is fine, but I don't know how to support other cases.
I'm getting actions like below but how to support infinity actions in reducder?

"[DEBUG] AnotherNestedView: buttonTapped"
received action:
  RootAction.nested(
    NestedAction.node(
      id: UUID(DCE1137E-334D-4804-BCF1-837F232E2150),
      action: NestedAction.node(
        id: UUID(2803A4DA-3BCA-4367-889C-BEAA392794BC),
        action: NestedAction.node(
          id: UUID(56A109EE-D865-491F-B9A7-147FA2B30492),
          action: NestedAction.node(
            id: UUID(96CAD5FC-C8FB-420C-822B-6B98C4448DE6),
            action: NestedAction.anotherNestedState(AnotherNestedAction.buttonTapped)
          )
        )
      )
    )
  )

---

Diff 04-HigherOrderReducers-Recursion.swift

diff --git a/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-Recursion.swift b/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-Recursion.swift
index 5c3cbcd75..bbd25d124 100644
--- a/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-Recursion.swift
+++ b/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-Recursion.swift
@@ -26,10 +26,116 @@ extension Reducer {
   }
 }
 
+struct AnotherNestedState: Equatable, Identifiable {
+  let id: UUID
+  var count: Int = 0
+  var children: IdentifiedArrayOf<AnotherNestedState> = []
+
+  // Error: `Value type 'AnotherNestedState' cannot have a stored property that recursively contains it`
+  // var nestedState: NestedState? = nil
+
+  // I can declare this, but `node2` in Action raise `Circular reference`.
+  var children2: IdentifiedArrayOf<NestedState> = []
+}
+
+indirect enum AnotherNestedAction: Equatable {
+  case append
+  case buttonTapped
+  case node(id: AnotherNestedState.ID, action: AnotherNestedAction)
+  case onAppear
+
+  // Error: `Circular reference`
+  // case node2(id: NestedState.ID, action: NestedAction)
+}
+
+struct AnotherNestedEnvironment {
+  var uuid: () -> UUID
+}
+
+let anotherNestedReducer = Reducer<AnotherNestedState, AnotherNestedAction, AnotherNestedEnvironment>.recurse { `self`, state, action, environment in
+  switch action {
+  case .append:
+    state.children.append(AnotherNestedState(id: environment.uuid()))
+    return .none
+
+  case .buttonTapped:
+    debugPrint("[DEBUG] AnotherNestedReducer: buttonTapped")
+    state.count += 1
+    return .none
+
+//  case .node2:
+//    return .none
+
+  case .node:
+    return self.forEach(
+      state: \.children,
+      action: /AnotherNestedAction.node(id:action:),
+      environment: { $0 }
+    )
+    .run(&state, action, environment)
+
+  case .onAppear:
+    debugPrint("[DEBUG] AnotherNestedReducer: onAppear")
+    state.count += 100
+    return .none
+  }
+}
+
+struct AnotherNestedView: View {
+  let store: Store<AnotherNestedState, AnotherNestedAction>
+
+  var body: some View {
+    WithViewStore(store) { viewStore in
+      Form {
+        Section {
+          Text("\(viewStore.count)")
+
+          Button(action: {
+            debugPrint("[DEBUG] AnotherNestedView: buttonTapped")
+            viewStore.send(.buttonTapped)
+          }) {
+            Text("Count up")
+          }
+        }
+
+        Section {
+          ForEachStore(
+            self.store.scope(state: \.children, action: AnotherNestedAction.node(id:action:))
+          ) { childStore in
+            WithViewStore(childStore) { childViewStore in
+              NavigationLink(
+                destination: AnotherNestedView(store: childStore)
+              ) {
+                Text("Go to AnotherNestedView")
+              }
+            }
+          }
+        }
+
+        Section {
+          NavigationLink(destination: Text("Not implement")) {
+            Text("How to set new NestedState?")
+          }
+        }
+      }
+      .onAppear {
+        debugPrint("[DEBUG] AnotherNestedView: onAppear")
+        viewStore.send(.onAppear)
+      }
+      .navigationBarItems(
+        trailing: Button("Add Another") { viewStore.send(.append) }
+      )
+    }
+  }
+}
+
 struct NestedState: Equatable, Identifiable {
   var children: IdentifiedArrayOf<NestedState> = []
   let id: UUID
   var description: String = ""
+
+  var anotherNestedState: AnotherNestedState? = nil
+  var isAnotherNestedStateActive: Bool { anotherNestedState != nil }
 }
 
 indirect enum NestedAction: Equatable {
@@ -37,15 +143,25 @@ indirect enum NestedAction: Equatable {
   case node(id: NestedState.ID, action: NestedAction)
   case remove(IndexSet)
   case rename(String)
+
+  case anotherNestedState(AnotherNestedAction)
+  case onAppear
+  case setAnotherNestedState(isActive: Bool)
 }
 
 struct NestedEnvironment {
   var uuid: () -> UUID
 }
 
-let nestedReducer = Reducer<
-  NestedState, NestedAction, NestedEnvironment
->.recurse { `self`, state, action, environment in
+let nestedReducer = Reducer<NestedState, NestedAction, NestedEnvironment>.combine(
+  anotherNestedReducer
+    .optional()
+    .pullback(
+      state: \.anotherNestedState,
+      action: /NestedAction.anotherNestedState,
+      environment: { .init(uuid: $0.uuid) }
+    )
+).combined(with: Reducer<NestedState, NestedAction, NestedEnvironment>.recurse { `self`, state, action, environment in
   switch action {
   case .append:
     state.children.append(NestedState(id: environment.uuid()))
@@ -66,17 +182,33 @@ let nestedReducer = Reducer<
   case let .rename(name):
     state.description = name
     return .none
+
+  case .anotherNestedState:
+      return .none
+
+  case .onAppear:
+    debugPrint("[DEBUG] NestedReducer: onAppear")
+    return .none
+
+  case .setAnotherNestedState(let isActive):
+    debugPrint("[DEBUG] NestedReducer: setAnotherNestedState \(isActive)")
+
+    if isActive {
+        state.anotherNestedState = .init(id: environment.uuid())
+    } else {
+        state.anotherNestedState = nil
+    }
+    return .none
   }
-}
+})
 
 struct NestedView: View {
   let store: Store<NestedState, NestedAction>
 
   var body: some View {
-    WithViewStore(self.store.scope(state: \.description)) { viewStore in
+    WithViewStore(self.store) { viewStore in
       Form {
         Section(header: Text(template: readMe, .caption)) {
-
           ForEachStore(
             self.store.scope(state: \.children, action: NestedAction.node(id:action:))
           ) { childStore in
@@ -99,8 +231,26 @@ struct NestedView: View {
           }
           .onDelete { viewStore.send(.remove($0)) }
         }
+
+        Section {
+          NavigationLink(
+            destination: IfLetStore(
+              self.store.scope(state: \.anotherNestedState, action: NestedAction.anotherNestedState),
+              then: { AnotherNestedView(store: $0) }
+            ),
+            isActive: viewStore.binding(
+              get: \.isAnotherNestedStateActive,
+              send: NestedAction.setAnotherNestedState(isActive:)
+            ),
+            label: { Text("Go to AnotherNestedState") }
+          )
+          .isDetailLink(false)
+        }
+      }
+      .onAppear {
+          debugPrint("[DEBUG] NestedView: onAppear")
+          viewStore.send(.onAppear)
       }
-      .navigationBarTitle(viewStore.state.isEmpty ? "Untitled" : viewStore.state)
       .navigationBarItems(
         trailing: Button("Add row") { viewStore.send(.append) }
       )

---

Sorry, I'm not good at English 🙇‍♀️