A bit confused about creating a details view with edit and delete action

[acools-rogervoice]

Hello 👋

I'm new to the composable architecture and I try to follow the serie on PointFree to understand how this architecture is built, but there is something I don't know how to solve.
(right now, I try to separate my view and reducer in their own modules)

I try to create an edit screen in which I can edit my element and delete it from my element list.
Basically, my screen looks like this :

So when I touch the "update name" button, I want to update the name of my element by a random string and when I touch the "delete" button, I want to delete my element from my list.

First, I tried to only remove the element from my list, and my code looks like this :

My view:

struct MyDetailsView: View {
    @Environment(\.dismiss) private var dismiss
    
    @ObservedObject var store: Store<AppState, AppAction>
    let myElement: MyElement
    
    var body: some View {
        VStack {
	    Text(myElement.name)
            Text(myElement.date.description)
	    Button("Update name") {
                // TODO: Update the element's name
	    }
            Button("Delete") {
                dismiss()
                store.send(.details(.delete(id: myElement.id)))
            }
        }
    }
}

I think, I should not have let myElement: MyElement but instead put this variable in my store, right ?

Then my global AppState (nothing fancy here):

struct AppState {
    var myElements: [MyElement] = [
        ...
    ]
}

and his extension to be able to use keypath :

var details: [DetailsState] {
    get {
        self.myElements.map {
            DetailsState(
                id: $0.id,
                name: $0.name,
                date: $0.date
            )
        }
    }
    set {
        self.myElements = newValue.map {
            MyElement(
                name: $0.name,
                date: $0.date
            )
        }
    }
}

My appReducer :

let appReducer: (inout AppState, AppAction) -> Void = combine(
    ...
    pullback(detailsReducer, value: \.details, action: \.details),
    ...
)

The specific reducer :

public func detailsReducer(
	state: inout [DetailsState],
	action: detailsAction
) {
	switch action {
	case let .delete(id):
		state.removeAll(where: { $0.id == id })
	}
}

and his state/action :

public enum DetailsAction {
	case delete(id: String)
}

public struct DetailsState {
	public let id: String
	public let name: String
	public let date: Date
	
	public init(...) { ... }
}

For now, there is only the specific reducer, his state and his action who are in a separate module, but now I want to extract the view also in the module.

But there is two thing I don't know how to achieve :

In my view, I have

• @ObservedObject var store: Store<AppState, AppAction>
• let myElement: MyElement
  How can I set my let myElement: MyElement in my specific state ?
  Because if I move the element in the specific store, my specific reducer should be updated and because the element is linked to the navigation, this element is not link in my global AppState (I don't know if my explanations are very clear, I'm sorry).

I tried to do something like this :

public struct DetailsState {
	public let elements: [DetailsElement]
        public let myElement: DetailsElement

        public init(...) { ... }
}

public struct DetailsElement {
        public let id: String
	public let name: String
	public let date: Date
	
        public init(...) { ... }
}

but then, I have to update the extension keypath here :

extension AppState {
        var details: [DetailsState] {
	        get {
		        // How to achieve this ?
	        }
	        set {
                        // How to achieve this?
	        }
        }
}

And I don't know how to do it, because my AppState doesn't store the element pushed on screen.

If it's not clear, I'll try to answer to your questions ! 😇

Basically, I try to create a view where I can view my element details, edit something but touching a button and delete the item.
In your serie, there is the delete action and the details view, but not the edit item informations and I'm a bit confused on how to do it.

Maybe I'm not yet advanced enough in the serie about the architecture? If it's the case, I'm interested about which episode is talking about a case like this.

Thanks a lot for reading me ! 🙏

Alexandre

[mbrandonw]

Hi @acools-rogervoice, it seems that you creating your app based off the very first episodes we did on TCA. While that can be instructive to understand all the decisions that went into making TCA, it does mean that you are dealing with a very old version of the library.

Instead I would recommend watching our newest series that gives a tour of the 1.0 version of the library. And in the 3rd episode of that series we show an edit flow.