hxdx
simple connecter for state dispatching and rendering
Connects a redux
-style store to a virtual-dom
-style view and sets up rendering with minimal boilerplate. Works well with functional components that take state and sometimes dispatch.
Exposes an hx
function for constructing components elements, and a dx
function for dispatching to the store within your components. Thus the name! Currently uses hyperx
for defining components and main-loop
for rendering. Doesn't require redux
, just something that acts as a state store.
I wrote this because I love the redux
design pattern, but found the react-redux
bindings, and react
in general, big and complex and hard to reason about. If you care about performance those are supposed to be much faster!
See also
virtual-app
related idea with different dependenciesredux-react
official connector for using redux with react
install
npm install hxdx
example
Set up a simple redux
store with one action
var { } var store =
Then create your components (normally these would be in separate files)
We'll make one that renders
var { return hx`<div></div>`}
And one that dipatches
var { { } return hx`<button onclick=>+</button>`}
Then just render your top-level component using the store
var { return hx`<div></div>`} hxdx
and the DOM will be updated using diffing on every click.
api
hxdx.render(component, store, [root])
Render a component and connect it to a store.
component
function mapping state to a virtual dom elementstore
a state store withsubscribe
,dispatch
, andgetState
methodsroot
a base DOM element to append to (if undefined will appemd to body)
Store can be able object that follows the redux
API.
hxdx.hx('<>')
Tagged template function for generating virtual-dom
elements. Can be required inside any of your components.
hxdx.dx(action)
Dispatch action to the store. Can be required inside any of your components.