How to use the framework.connect function in framework

// D.withLog({key}),
  )(
    // Init
    D.init(seed),
    D.initAsync(sources.state$),

    // Navigation
    intents.navigateTo$.map(url => R.fn("navigateTo", R.set("url", url))),
    intents.navigateHistory$.map(url => R.fn("navigateHistory", R.set("url", url))),

    // Content
    contentSinks$.flatMapLatest(x => x.action$),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      url: D.deriveOne(state$, ["url"]),
      Content: contentSinks$.map(x => x.Component),
    },
    ({url, Content}) => {
      return <div>
        <div>
          <p>
            Current URL: {url}
          </p>
          
        </div>
        <div>
          <content>
        </content></div>
      </div>

)

  // STATE
  let detail$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key}),
  )(
    D.init(seed),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(detail$, ["loading"]),
      user: D.deriveOne(sources.state$, baseLens),
    },
    ({loading, user}) => loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(user => {
      if (user) {
        return function afterGET(state) {
          return R.set(baseLens, user, state)
        }

)

  // STATE
  let detail$ = D.run(
    () => D.makeStore({}),
    // D.withLog({key}),
  )(
    D.init(seed),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(detail$, ["loading"]),
      post: D.deriveOne(sources.state$, baseLens),
    },
    ({loading, post}) => loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(post => {
      if (post) {
        return function afterGET(state) {
          return R.set(baseLens, post, state)
        }

table: sources.state$.map(s => s.users),
      index: index$.debounce(200),
    },
    ({table, index}) => {
      let filterFn = makeFilterFn(index.filters)
      let sortFn = makeSortFn(index.sort)
      return R.pipe(
        R.values,
        R.filter(filterFn),
        R.sort(sortFn),
      )(table)
    }
  )

  // COMPONENT
  let Component = F.connect(
    {
      index: index$,
      users: users$,
    },
    ({index, users}) => index.loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(users => {
      return function afterFetch(state) {
        return R.over(baseLens, R.mergeFlipped(users), state)
      }
    }).flatMapErrors(err => {

base$: user$.filter(R.not),
    }
  }

  // FETCHES
  let fetches = {
    base$: intents.fetch.base$
      .flatMapConcat(_ => K.fromPromise(
        A.get(`/api/${baseLens[0]}/${baseLens[1]}/`)
         .then(resp => resp.data.models[baseLens[1]])
         .catch(R.id)
      )),
  }

  // COMPONENT
  let Component = connect(
    {
      loading: loading$,
      user: user$,
    },
    UserDetail
  )

  // ACTIONS
  let action$ = K.merge([
    K.constant(function initPage(state) {
      return R.set2(["document", "title"], `User ${params.id}`, state)
    }),

    fetches.base$
      .map(maybeModel => function afterGET(state) {
        return maybeModel instanceof Error

index: index$.debounce(200),
      table: sources.state$.map(s => s.users),
    },
    ({index, table}) => {
      let filterFn = makeFilterFn(index.filters)
      let sortFn = makeSortFn(index.sort)
      return R.pipe(
        R.values,
        R.filter(filterFn),
        R.sort(sortFn),
      )(table)
    }
  )

  // COMPONENT
  let Component = connect(
    {
      loading: loading$,
      index: index$,
      users: users$,
    },
    UserIndex
  )

  // ACTIONS
  let action$ = K.merge([
    K.constant(function initPage(state) {
      return R.set2(["document", "title"], `Users`, state)
    }),

    fetches.base$
      .map(maybeModels => function afterGET(state) {

intents.submit$.delay(1).map(_ => (form) => {
      let res = validate(form.input, T.PostForm)
      if (res.isValid()) {
        return seed
      } else {
        let errors = R.reduce((z, key) => {
          let e = R.find(e => R.equals(e.path, [key]), res.errors)
          return e ? R.set(key, e.message, z) : z
        }, {}, R.keys(form.input))
        return R.set("errors", errors, form)
      }
    }),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      form: form$,
    },
    ({form}) =>
      
  )

  // ACTION (external)
  let action$ = K.merge([
    form$.sampledBy(intents.submit$).flatMapConcat(form => {
      let postForm
      try {
        postForm = T.PostForm(form.input)
      } catch (e) {
        return K.never()
      }

} else {
        let errors = R.reduce((z, key) => {
          let e = R.find(e => R.equals(e.path, [key]), res.errors)
          return e ? R.set(key, e.message, z) : z
        }, {}, R.keys(input))
        return {input, errors}
      }
    }),

    D.ifBrowser(
      fetchStart$.merge(fetchEnd$.delay(1)).map(_ => R.over(["loading"], R.not))
    ),
  ).$

  // COMPONENT
  let Component = F.connect(
    {
      loading: D.deriveOne(form$, ["loading"]),
      form: form$,
    },
    ({loading, form}) => loading
      ? 
      : 
  )

  // ACTION (external)
  let action$ = K.merge([
    fetchEnd$.map(post => {
      if (post) {
        return function afterFetch(state) {
          return R.set(baseLens, post, state)
        }

export default (sources, key) => {
  let intents = {
    inc$:  sources.DOM.fromKey("inc").listen("click"),
    dec$:  sources.DOM.fromKey("dec").listen("click"),
    add2$: sources.DOM.fromKey("add2").listen("click"),
    sub2$: sources.DOM.fromKey("sub2").listen("click"),
  }

  let $ = O.merge(
    intents.inc$.map(_ => R.inc),
    intents.dec$.map(_ => R.dec),
    intents.add2$.map(_ => R.add(2)),
    intents.sub2$.map(_ => R.flip(R.subtract)(2)),
  )

  let DOM = F.connect(
    {counter: sources.$},
    (props) =>
      <p>
        CounterY ({key}): <span>{props.counter}</span>
        {" "}
        <button data-key="inc">+1</button>
        {" "}
        <button data-key="dec">-1</button>
        {" "}
        <button data-key="add2">+2</button>
        {" "}
        <button data-key="sub2">-2</button>
      </p>
    )

  return {$, DOM}

({index, todos}) => {
      return R.pipe(
        R.values,
        R.filter(index.filterFn),
        R.sort(index.sortFn),
      )(todos)
    }
  )

  let action$ = K.merge([
    intents.toggleTodo$.map(id => function toggleTodo(state) {
      return R.over2(["todos", id, "completed"], R.not, state)
    }),
  ])

  let Component = connect(
    {todos: todos$},
    TodoIndex,
  )

  return {action$, Component}
}