How to implement a basic UITextField input + UIButton action scenario using ReactiveCocoa 3?

Question

I'm a Swift and ReactiveCocoa noob at the same time. Using MVVM and Reactive Cocoa v3.0-beta.4 framework, I'd like to implement this setup, to learn the basics of the new RAC 3 framework.

I have a text field and I want the text input to contain more than 3 letters, for validation. If the text passes the validation, the button underneath should be enabled. When the button receives the touch down event, I want to trigger an action using the view model's property.

Since there are very few resources about RAC 3.0 beta at the moment, I implemented the following by reading the QAs on the framework's Github repo. Here's what I could come up with so far:

ViewModel.swift

class ViewModel {

    var text = MutableProperty<String>("")
    let action: Action<String, Bool, NoError>
    let validatedTextProducer: SignalProducer<AnyObject?, NoError>

    init() {
        let validation: Signal<String, NoError> -> Signal<AnyObject?, NoError> = map ({
            string in
            return (count(string) > 3) as AnyObject?
        })

        validatedTextProducer = text.producer.lift(validation)

        //Dummy action for now. Will make a network request using the text property in the real app. 
        action = Action { _ in
            return SignalProducer { sink, disposable in
                sendNext(sink, true)
                sendCompleted(sink)
            }
        }
    }
}

ViewController.swift

class ViewController: UIViewController {

    private lazy var txtField: UITextField = {
        return createTextFieldAsSubviewOfView(self.view)
    }()

    private lazy var button: UIButton = {
        return createButtonAsSubviewOfView(self.view)
    }()

    private lazy var buttonEnabled: DynamicProperty = {
       return DynamicProperty(object: self.button, keyPath: "enabled")
    }()

    private let viewModel = ViewModel()
    private var cocoaAction: CocoaAction?

    override func viewDidLoad() {
        super.viewDidLoad()
        view.setNeedsUpdateConstraints()

        bindSignals()
    }

    func bindSignals() {
        viewModel.text <~ textSignal(txtField)
        buttonEnabled <~ viewModel.validatedTextProducer

        cocoaAction = CocoaAction(viewModel.action, input:"Actually I don't need any input.")
        button.addTarget(cocoaAction, action: CocoaAction.selector, forControlEvents: UIControlEvents.TouchDown)

        viewModel.action.values.observe(next: {value in
            println("view model action result \(value)")
        })
    }

    override func updateViewConstraints() {
        super.updateViewConstraints()

        //Some autolayout code here
    }
}

RACUtilities.swift

func textSignal(textField: UITextField) -> SignalProducer<String, NoError> {
    return textField.rac_textSignal().toSignalProducer()
        |> map { $0! as! String }
        |> catch {_ in SignalProducer(value: "") }
}

With this setup, the button gets enabled when the view model's text is longer than 3 characters. When the user taps on the button, the view model's action runs and I can get the return value as true. So far so good.

My question is: Inside the view model's action, I want to use its stored text property and update the code to make a network request using it. So, I don't need an input from the view controller's side. How can I not require an input for my Action property?

Answer 1

From the ReactiveCocoa/CHANGELOG.md:

An action must indicate the type of input it accepts, the type of output it produces, and what kinds of errors can occur (if any).

So currently there is no way to define an Action without an input.

I suppose you could declare that you don't care about input by making it AnyObject? and creating CocoaAction with convenience initialiser:

cocoaAction = CocoaAction(viewModel.action)

Additional remarks

• I dont't like using AnyObject? instead of Bool for validatedTextProducer. I suppose you preferred it because binding to the buttonEnabled property requires AnyObject?. I would rather cast it there though, instead of sacrificing type clarity of my view model (see example below).

• You might want to restrict execution of the Action on the view model level as well as UI, e.g.:

  class ViewModel {
  
      var text = MutableProperty<String>("")
      let action: Action<AnyObject?, Bool, NoError>
  
      // if you want to provide outside access to the property
      var textValid: PropertyOf<Bool> {
          return PropertyOf(_textValid)
      }
  
      private let _textValid = MutableProperty(false)
  
      init() {
          let validation: Signal<String, NoError> -> Signal<Bool, NoError> = map { string in
              return count(string) > 3
          }
  
          _textValid <~ text.producer |> validation
  
          action = Action(enabledIf:_textValid) { _ in
              //...
          }
      }
  }
  

  And binding to buttonEnabled:

  func bindSignals() {
      buttonEnabled <~ viewModel.action.enabled.producer |> map { $0 as AnyObject }
      //...
  }
  

Answer 2

If you take a look at Colin Eberhardt blog post on ReactiveCocoa 3 there's a very nice approach to this problem.

Basically because it's still in beta there's no extension on UIView that makes those properties easy to use with RAC3 but you can add them easily. I would recommend adding a UIKit+RAC3.swift extension and adding them as you need:

import UIKit
import ReactiveCocoa

struct AssociationKey {
    static var hidden: UInt8 = 1
    static var alpha: UInt8 = 2
    static var text: UInt8 = 3
    static var enabled: UInt8 = 4
}

func lazyAssociatedProperty<T: AnyObject>(host: AnyObject,
    key: UnsafePointer<Void>, factory: ()->T) -> T {
        var associatedProperty = objc_getAssociatedObject(host, key) as? T

        if associatedProperty == nil {
            associatedProperty = factory()
            objc_setAssociatedObject(host, key, associatedProperty,
                UInt(OBJC_ASSOCIATION_RETAIN))
        }
        return associatedProperty!
}

func lazyMutableProperty<T>(host: AnyObject, key: UnsafePointer<Void>,
    setter: T -> (), getter: () -> T) -> MutableProperty<T> {
        return lazyAssociatedProperty(host, key) {
            var property = MutableProperty<T>(getter())
            property.producer
                .start(next: {
                    newValue in
                    setter(newValue)
                })
            return property
        }
}

extension UIView {
    public var rac_alpha: MutableProperty<CGFloat> {
        return lazyMutableProperty(self, &AssociationKey.alpha, { self.alpha = $0 }, { self.alpha  })
    }

    public var rac_hidden: MutableProperty<Bool> {
        return lazyMutableProperty(self, &AssociationKey.hidden, { self.hidden = $0 }, { self.hidden  })
    }
}

extension UIBarItem {
    public var rac_enabled: MutableProperty<Bool> {
        return lazyMutableProperty(self, &AssociationKey.enabled, { self.enabled = $0 }, { self.enabled  })
    }
}

That way you simply replace the RAC = RACObserve logic by (for example):

var date = MutableProperty<NSDate?>(nil)
var time = MutableProperty<Int?>(nil)

let doneItem = UIBarButtonItem()
doneItem.rac_enabled <~ date.producer
        |> combineLatestWith(time.producer)
        |> map { return $0.0 != nil && $0.1 != nil }

Again this is all taken from his blog post which far more descriptive than this answer. I highly recommend anyone interested in using RAC 3 reads his amazing posts and tutorials:

• A first look at RAC 3
• Signal Producers and API Clarity
• MVVM and RAC 3