{"action":"created","issue":{"url":"https://api.github.com/repos/bhauman/devcards/issues/105","repository_url":"https://api.github.com/repos/bhauman/devcards","labels_url":"https://api.github.com/repos/bhauman/devcards/issues/105/labels{/name}","comments_url":"https://api.github.com/repos/bhauman/devcards/issues/105/comments","events_url":"https://api.github.com/repos/bhauman/devcards/issues/105/events","html_url":"https://github.com/bhauman/devcards/issues/105","id":154226015,"number":105,"title":"Using devcards with re-frame","user":{"login":"Conaws","id":2712495,"avatar_url":"https://avatars2.githubusercontent.com/u/2712495?v=4","gravatar_id":"","url":"https://api.github.com/users/Conaws","html_url":"https://github.com/Conaws","followers_url":"https://api.github.com/users/Conaws/followers","following_url":"https://api.github.com/users/Conaws/following{/other_user}","gists_url":"https://api.github.com/users/Conaws/gists{/gist_id}","starred_url":"https://api.github.com/users/Conaws/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Conaws/subscriptions","organizations_url":"https://api.github.com/users/Conaws/orgs","repos_url":"https://api.github.com/users/Conaws/repos","events_url":"https://api.github.com/users/Conaws/events{/privacy}","received_events_url":"https://api.github.com/users/Conaws/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2016-05-11T11:58:56Z","updated_at":"2018-02-23T18:10:22Z","closed_at":null,"author_association":"NONE","body":"Devcards is awesome, particularly for beginners or anyone exploring Reagent or Om.\n\nRe-frame is a great way to design large Reagent applications -- however, since there is only one app-db that holds all the state, it may not be obvious how you can use it with devcards.\n\nI found an inelegant way to handle it -- and I'm curious if it would make sense to put it in the wiki\n\nI also think that this pr or something like it might allow for a more idiomatic solution #97 curious of your thoughts. \n### When you want to see the entire state of your re-frame db to appear in a card\n\nrequire [re-frame.db :refer [app-db]] in the ns, then put that in as the db of your reagent card.\n### When you want to only see some component of the state,\n\nDef a subscription to that component of the state, and use that as the card's db\n\n_Here's an example:_\n1.  Create a handler to update app-db\n\n```\n(register-handler\n :demo1\n (fn [_ _]\n   {:status \"great\"\n     :number 42}))\n\n```\n\nthis just replaces the app-db with the map\n1. dispatch that action\n\n```\n(dispatch [:demo1])\n\n;you can deref the app-db to make sure it worked\n@app-db\n; should be {:status \"great\" :number 42}\n\n```\n\nif you have a card that only needs the status, register a sub for that\n\n```\n```\n\n(register-sub\n :status\n (fn [db _](reaction %28:status @db%29)))\n\n```\n;; then def that subscription\n\n(def lildb \n  (subscribe [:status]))\n\n;; now you have a subset of the db you can include in a card\n\n@lildb\n;; should show \"great\"\n\n(defcard-rg status-card\n[:h1 (str \"I'm\" @lildb \"today\")]\nlildb\n{:inspect-data true})\n`\n```\n## But wait -- there is a problem with this -- the problem being that changes to the app-db don't get reflected in the def'd subscription\n\n --- in your devcards use that def'd subscription as the card's db, and in place of where you'd define the subscription in your component\n\nExample\n\n```\n(defn swapper []\n  (let [s (subscribe [:status])]\n    [:div\n     (pr-str @s)\n     [:button {:on-click #(dispatch [:change-status \"fantastic\"])} \"fantastic\"]\n     [:button {:on-click #(dispatch [:change-status \"terrible\"])} \"terrible\"]]))\n\n(defcard-rg status-card\n   [swapper]\n  lildb\n  {:inspect-data true\n   :history true})\n\n```\n\nwhen the dispatch buttons are clicked, the value of @s will change, but not the card's db.  Why?  The card's db isn't being directly altered, or called from within the card -- so if you want it to match up appropriately, you have to do things like this\n\n```\n(def lildb \n (subscribe [:status]))\n\n(defn swapper []\n    [:div\n    (pr-str @lildb)\n     [:button {:on-click #(dispatch [:change-status \"fantastic\"])} \"fantastic\"]\n     [:button {:on-click #(dispatch [:change-status \"terrible\"])} \"terrible\"]]))\n```\n\nUnfortunately, while doing that will allow you to walk the history back and forth, the history you're walking back and forth can fall out of sync with the actual app-db -- so you have to be cautious.\n\nIs there a better way to do this?\n"},"comment":{"url":"https://api.github.com/repos/bhauman/devcards/issues/comments/368091910","html_url":"https://github.com/bhauman/devcards/issues/105#issuecomment-368091910","issue_url":"https://api.github.com/repos/bhauman/devcards/issues/105","id":368091910,"user":{"login":"jfigueroama","id":1185792,"avatar_url":"https://avatars3.githubusercontent.com/u/1185792?v=4","gravatar_id":"","url":"https://api.github.com/users/jfigueroama","html_url":"https://github.com/jfigueroama","followers_url":"https://api.github.com/users/jfigueroama/followers","following_url":"https://api.github.com/users/jfigueroama/following{/other_user}","gists_url":"https://api.github.com/users/jfigueroama/gists{/gist_id}","starred_url":"https://api.github.com/users/jfigueroama/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jfigueroama/subscriptions","organizations_url":"https://api.github.com/users/jfigueroama/orgs","repos_url":"https://api.github.com/users/jfigueroama/repos","events_url":"https://api.github.com/users/jfigueroama/events{/privacy}","received_events_url":"https://api.github.com/users/jfigueroama/received_events","type":"User","site_admin":false},"created_at":"2018-02-23T18:10:22Z","updated_at":"2018-02-23T18:10:22Z","author_association":"NONE","body":"Hello. I made a separate namespace to host a local state version of re-frame v10.2 some months ago. Basically, one creates a state which holds mostly all containers of re-frame (app-db, kind->id->handler, etc.). Then, inside the app, all calls to reg-sub, reg-event-X, subscribe, dispatch, will use the created state as first parameter.\r\n\r\n```clojure\r\n(defonce state\r\n  (-> (new-state)\r\n        (reg-sub :db (fn [db _] db)))\r\n        ...\r\n       (reg-event-db  .....)))\r\n;; later ...\r\n(dispatch state [:event-x])\r\n(subscribe state [:db])\r\n```\r\n\r\nIt appears to work well. I can use devcards with 2 re-frame applications on the same namespace/file. It may be useful for someone.\r\n\r\nhttps://github.com/jfigueroama/re-frame\r\n"}}
{"actor":{"display_login":"jfigueroama"}}