Coder Social home page Coder Social logo

reagent-cursor's Introduction

Cursors

Cursors can be seen as a kind of pointer to a particular part of an atom, which behaves exactly like a normal atom. This means that you use the same functions you would on an atom (reset!, swap!, deref, add-watch, etc) but affect only the part you are interested in.

This enables you to create reusable functions and components by abstracting away complex paths and getter/setter functions.

;; what was...
(swap! my-atom update-in [:some :path :that :might :be :quite :deep] my-fn)

;; ...can now become

(swap! my-cursor my-fn)

;; Notice that the path is no longer hardcoded; it could be a simple
;; atom, or a cursor pointing to the 10th level of a complex nested
;; hashmap.

;; How about associating a value into the nested structure? No
;; problem! Just `reset!` the cursor:

(reset! my-cursor "my-new-value")

;; Now just deref it:

@my-cursor

=> "my-new-value"

Usage

Add [reagent/reagent-cursor "0.1.2"] to :dependencies in project.clj.

In your Reagent application (:require [reagent.cursor :as rc]).

There are two main functions available to create cursors: cursor and cur.

cursor

cursor has two arities.

When given a single argument (a path), it returns a function that can create a cursor when given an atom. Useful to create mutliple cursors with the same path.

(def my-custom-cursor-fn (rc/cursor [:some :arbitrary :path]))

(map my-custom-cursor-fn [atom1 atom2 atom3])

;; this will return a collection of [cursor1 cursor2 cursor3]

When given two arguments, cursor will return a cursor.

(def c1 (rc/cursor [:some :arbitrary :path] atom1))

cur

cur is the little brother of cursor. It will only accept 2 arguments (the atom and a path), but is guaranteed to return a cursor.

Note that the atom argument is placed on the left, allowing you to use a thread-first macro (cursor requires a thread-last macro).

(-> my-atom
	(rc/cur [:some :path]) ;; <---- create the cursor
	(add-watch :my-watch #(println "updated!"))
	(historian/record! :my-state)
    (ls/local-storage :my-state))
	

License

Copyright (c) 2014 Sean Corfield

Distributed under the Eclipse Public License, the same as Clojure.

reagent-cursor's People

Contributors

frozenlock avatar seancorfield avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.