Get value back from sheet

[csbence10]

Hi!

I was wondering if there's a way I can get back a value from a sheet. Let's say I have a basic application which has a screen with a Text which says "false". When the app opens a model sheet comes up which has a simple toggle (initial state is false) and a Done button and the Cancel button.

a) After the sheet comes up and I play with the toggle if I swipe down the sheet a little (so it's not dismissed, but I can see the content behind) I notice that the Text of the main view changed.
My goal is to only see the changes in the main view if the done button is tapped on the sheet. So prevent the main view to rerender until done is tapped and I got the result back from the sheet.

b) It would be even better if I the sheet state would be optional, and the main view's Text initially would say "Toggle is not set yet". And after the modal is shown if I tap the cancel button nothing changes, if I tap the done button the state becomes false (since that's it initial state of the toggle).

My code is so far (which is the a) case):

struct SheetView: View {
    let store: Store<SheetState, SheetAction>
    var body: some View {
        WithViewStore(self.store) { viewStore in
            NavigationView {
            Toggle("Toggle", isOn: viewStore.binding(get: \.value, send: SheetAction.toggle))
                .navigationBarItems(trailing: Button("Done") {
                    viewStore.send(.doneTapped(viewStore.value))
                })
            }
        }
    }
}

struct MainView: View {
    let store: Store<MainState, MainAction>
    var body: some View {
        WithViewStore(self.store) { viewStore in
            Text(String(viewStore.sheetState.value))
                .sheet(isPresented: viewStore.binding(get: { $0.isSheetShown }, send: MainAction.showSheet)) {
                    SheetView(store: self.store.scope(state: { $0.sheetState },
                                                      action: MainAction.sheetAction))
                }
        }
    }
}


struct SheetState: Equatable {
    var value = false
}

enum SheetAction: Equatable {
    case toggle
    case cancelTapped
    case doneTapped(Bool)
}

let sheetReducer = Reducer<SheetState, SheetAction, Void> { state, action, _ in
    switch action {
    case .toggle:
        state.value.toggle()
        return .none
    case .cancelTapped:
        return .none
    case .doneTapped(let value):
        state.value = value
        return .none
    }
}

struct MainState: Equatable {
    var sheetState: SheetState
    var isSheetShown = true
}

enum MainAction: Equatable {
    case sheetAction(SheetAction)
    case showSheet
}

let mainReducer = Reducer<MainState, MainAction, Void>.combine(
    sheetReducer
        .pullback(
            state: \.sheetState,
            action: /MainAction.sheetAction,
            environment: { _ in ()}),
    Reducer { state, action, _ in
        switch action {
        case let .sheetAction(.doneTapped(value)):
            state.isSheetShown = false
            state.sheetState = SheetState(value: value)
            return .none
        case .sheetAction:
            return .none
        case .showSheet:
            return .none
        }
    }
)

[AlexisQapa]

Here is one approach :

struct SheetView: View {
	let store: Store<SheetState, SheetAction>

	var body: some View {
		WithViewStore(store) { viewStore in
			NavigationView {
				Toggle("Toggle", isOn: viewStore.binding(get: \.value, send: SheetAction.toggle))
				.navigationBarItems(trailing: Button("Done") { viewStore.send(.done) })
			}
		}
	}
}

struct MainView: View {
	let store: Store<MainState, MainAction>

	var body: some View {
		WithViewStore(store) { viewStore in
			VStack {
				Text(String(viewStore.value))
				Button("Show sheet", action: { viewStore.send(.showSheet)})
			}
			.sheet(
				isPresented: viewStore.binding(get: { $0.sheetState != nil }, send: MainAction.dismissSheet),
				content: {
					IfLetStore(
						store.scope(state: \.sheetState, action: MainAction.sheetAction), then: SheetView.init(store:)
					)
				}
			)
		}
	}
}

struct SheetState: Identifiable, Equatable {
	let id = UUID()
	var value: Bool
}

enum SheetAction: Equatable {
	case toggle, done
}

let sheetReducer = Reducer<SheetState, SheetAction, Void> { state, action, _ in
	switch action {
	case .toggle:
		state.value.toggle()
		return .none

	case .done:
		return .none
	}
}

struct MainState: Equatable {
	var value = false, sheetState: SheetState?
}

enum MainAction: Equatable {
	case sheetAction(SheetAction), showSheet, dismissSheet
}

let mainReducer = Reducer<MainState, MainAction, Void>.combine(
	sheetReducer
		.optional()
		.pullback(state: \.sheetState, action: /MainAction.sheetAction, environment: { _ in }),
	Reducer { state, action, _ in
		switch action {
		case .sheetAction(.done):
			state.value = state.sheetState?.value ?? false
			return Effect(value: .dismissSheet)

		case .showSheet:
			state.sheetState = .init(value: state.value)
			return .none

		case .dismissSheet:
			state.sheetState = nil
			return .none

		case .sheetAction:
			return .none
		}
	}
)

Please note that :
Using IfLetStore make your view blank while dismissing.
The identifiable conformance should probably come from your model.
Using this you need to always sync manually your state, you won't have compile time error if you forget a field.