React: Draft

About This Widget

Source code for this project is available at https://github.com/xerocross/draft-react.

I like to think of this little widget as a place where you can draft emails if you are obsessively worried about getting the tone just right—an email to your boss perhaps. Committing your changes and then being able to browse back and forward to review them is sort of a more robust implementation of undo/redo than a basic text editor—but not quite as robust as, say, Git.

This is a React app that uses Redux for managing state. I wrote it while actively trying to think of some kind of widget where the notion of a stream of immutable states seemed relevant to what the app does. That "stream of immutable states" thing is central to the way React and Redux work. In a sense, this thing actually lets you take a snapshot of these states (by clicking the commit button) even as you move forward with new changes. Thus the stream of states. And the user can actively pick some special ones to keep in memory.

On first glance, it may look like the state here is just the content of the textarea. That is the state of the front-facing editor component (more or less), but the app's state contains all the commit history. Thus, the state contains all the previous commits plus a pointer to what commit is currently being displayed, and some other things that turned out necessary to make the widget function in the least surprising way.

This was my first encounter with writing Redux actions and reducer functions and wiring those things up to a component's state and its rendering.

It also uses the localStorage API to autosave the entire app's state (including all commit history) as the user works.

I need to clean up the source a bit more before I recommend anybody read it. I'll update this page with a link to the source when that is ready.