react-cursor
Immutable state for React.js
react-cursor hello-world in a fiddle
What is react-cursor
Cursors are a tool for working with recursive or deeply nested data, immutably. react-cursor is a javascript port of an abstraction that I first saw in ClojureScript. Cursors let your app hold all its state at the root of the UI tree; thus the root is stateful, and all downtree views are stateless.
Project Maturity
master is stable, there is a full test suite.
API
Cursor
interface has three methods: value
, swap
and refine
.
cur.value()
return the value in the cursor at some path.cur.refine(path, ...paths)
return a cursor nested inside another cursorcur.swap(f)
apply f to the value in the cursor value and puts returned value into the backing store
For frequently used swap functions, see the bundled update-in
dependency: see here. Cursor instances have optional syntax sugar for the swap fns provided by update-in; see CursorOperations.js
FAQ
- Cursors have value semantics, don't mutate values that come out of a cursor
- Equal cursors are
===
for easy and efficient optimized rendering (see hello world jsfiddle for example) - You should read the source! The core cursor abstraction is 8 lines of code
- There is an undocumented alternate implementation,
RefCursor
, which has reference semantics, this is only useful for working with legacy mutable code
License
react-cursor
is governed under the MIT License.
Attributions
react-cursor was built by Daniel Miladinov and Dustin Getz.