Skip to main content

Using a React Context as a Dispatch Replacement

React Contexts are the pretty little bows of the React world.

Here's a really quick example of the kind of messy code you can cleanup by using contexts, without dragging in a larger dependency like Redux or even Flux. Starting backwards with a diff showing lines of code I was able to remove:


All the properties I was able to remove were just pass-through. The Carousel component didn't care about any of them, but it had to pass through these callbacks so the multiple TaskList components inside the carousel could invoke actions. They were removed from the Component class itself, too, since it no longer needed to pass them through.

Where did they all go?


My ActionContext removed all the need for these passthroughs by providing a single simple helper method, action(), that components rendered under it can access.


I really enjoy the pattern of passing a single callback through a context and removing what used to be lots of callback properties. Of course, I could be using a proper dispatcher from Flux or otherwise. There are certainly several alternate and more "formal" patterns to the same end.

What I like is a solution that uses less dependencies and fewer concepts, and to me feels much simpler. I'm tending towards these clean-and-simple paths for personal projects, where I want to work quicker and rely on fewer parts, but I still want architectures that feel stable and robust.

This is one way to get that balance.

Comments

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operate on

Statement Functions

At a small suggestion in #python, I wrote up a simple module that allows the use of many python statements in places requiring statements. This post serves as the announcement and documentation. You can find the release here . The pattern is the statement's keyword appended with a single underscore, so the first, of course, is print_. The example writes 'some+text' to an IOString for a URL query string. This mostly follows what it seems the print function will be in py3k. print_("some", "text", outfile=query_iostring, sep="+", end="") An obvious second choice was to wrap if statements. They take a condition value, and expect a truth value or callback an an optional else value or callback. Values and callbacks are named if_true, cb_true, if_false, and cb_false. if_(raw_input("Continue?")=="Y", cb_true=play_game, cb_false=quit) Of course, often your else might be an error case, so raising an exception could be u

How To use Sphinx Autodoc on ReadTheDocs with a Django application

Sphinx is awesome for writing documentation. ReadTheDocs is awesome for hosting it. Autodocs are great for covering your entire API easily. Django is a great framework that makes my job easier. Between these four things is an interaction that only brought me pain, however. I'm here to help the next dev avoid this. Autodocs works by importing your modules and walking over the classes and functions to build documentation out of the existing docstrings. It can be used to generate complete API docs quickly and keep them in sync with the libraries existing docstrings, so you won't get conflicts between your docs and your code. Fantastic. This creates a problem when used with Django applications, where many things cannot be imported unless a valid settings module can be found. This can prevent a hurdle in some situations, and requires a little boilerplate to get working properly with Sphinx. It require a little extra to get working on ReadTheDocs. What makes this particularly h