IAM iOS

[RxSwift] MVVM-C with Building Memo App (6) 메모 편집 구현 본문

RxSwift

[RxSwift] MVVM-C with Building Memo App (6) 메모 편집 구현

IAMiOS 2022. 5. 12. 01:18

 

해당 포스팅은 KxCoding RxSwift 강의를 참고한 포스팅입니다!

https://www.youtube.com/watch?v=m41N4czHGF4&list=PLziSvys01Oek7ANk4rzOYobnUU_FTu5ns&index=2

 

메모 편집 구현


편집 기능은 쓰기 기능과 동일하지만 전달하는 Action이 다르다.

  • 임시 메모를 생성하는 것이 아닌 편집할 실제 메모를 전달
  • update 로직은 동일하지만, cancel로 삭제할 필요가 없다. (편집 화면을 닫으면 됨)

 

MemoDetailViewModel

class MemoDetailViewModel: CommonViewModel {
			...
		
    /// saveAction 처리 메서드
    /// ComposeViewModel로 전달하는 Action
    func performUpdate(memo: Memo) -> Action<String, Void> {
        return Action { input in
            return self.storage.update(memo: memo, content: input).map { _ in }
        }
    }

    /// 보기 화면의 편집버튼과 Binding할 Action
    func makeEditAction() -> CocoaAction {
        return CocoaAction { _ in
            let composeViewModel = MemoComposeViewModel(
                title: "메모 편집",
                content: self.memo.content,
                sceneCoordinator: self.sceneCoordinator,
                storage: self.storage,
                saveAction: self.performUpdate(memo: self.memo)
            )

            let composeScene = Scene.compose(composeViewModel)
            return self.sceneCoordinator.transition(
                to: composeScene,
                using: .modal,
                animated: true
            ).asObservable().map { _ in }
        }
    }
}

 

MemoDetailViewController

class MemoDetailViewController: UIViewController, ViewModelBindableType {
    ...

    func bindViewModel() {
    ...

    editButton.rx.action = viewModel.makeEditAction()
}

 

결과 화면

  • 편집 후 메모 보기 화면에서 바로 적용되지 않는 이슈
  • 단순히 tableView를 reloadData()하는 방법으로는 해결 불가능
  • Subject와 Binding되어 있기 때문 → Subject가 편집한 내용을 다시 방출하도록 수정 
 

 

  • MemoDetailViewModel에서 지금은 update 메서드만 호출하고, 메서드가 return 하는 Observable은 무시
func performUpdate(memo: Memo) -> Action<String, Void> {
    return Action { input in
        return self.storage.update(memo: memo, content: input).map { _ in }
    }
}

 

 

Refactoring


  • 새로운 구독자를 추가하고, Subject로 업데이트된 메모를 전달
  • 새로운 내용을 subject로 전달(편집된 내용을 next 이벤트에 담아서 방출)
func performUpdate(memo: Memo) -> Action<String, Void> {
    return Action { input in
        self.storage.update(memo: memo, content: input)
            .subscribe(onNext: { updated in
            /// 새로운 내용을 subject로 전달(편집된 내용을 next 이벤트에 담아서 방출)
                self.contents.onNext([
                    updated.content,
                    self.formatter.string(from: updated.insertDate)
                ])
            })
            .disposed(by: self.rx.disposeBag)

        /// 빈 Observable return
        return Observable.empty()
    }
}

 

수정된 결과 화면

 

 

코드 보러 가기

 

GitHub - camosss/RxSwift: RxSwift 공부한 내용 정리

RxSwift 공부한 내용 정리. Contribute to camosss/RxSwift development by creating an account on GitHub.

github.com

 

(7) 메모 삭제 구현 보러 가기

 

[RxSwift] MVVM-C with Building Memo App (7) 메모 삭제 구현

해당 포스팅은 KxCoding RxSwift 강의를 참고한 포스팅입니다! https://www.youtube.com/watch?v=m41N4czHGF4&list=PLziSvys01Oek7ANk4rzOYobnUU_FTu5ns&index=2 #8. 메모 삭제 구현 (메모 보기 화면과 메모 목록..

llan.tistory.com