Awesome
Redux-Zero Tools (rzero-tools)
Overview
I was recently reviewing redux-zero
and the tool seems to seriously take the
strain off using redux
given the massive amount of boiler plate that tool
requests its users provide.
Though redux-zero was a breath of fresh air, as are many tools that cut out the
cruft, it was also missing some convenience that once achieves when finally
getting redux setup in your project.
The biggest missing part was being able to receive only the slice of your store
that you need and being able to update that piece as easily.
Installation
Add the module as a dependency to your application
npm install --save rzero-tools
Usage
As a fan of using ES7 style decorators, I felt that it might make more sense to provide a single decorator to solve this issue. The decorator goes before your react component and takes a reference to your store, and a dot separated string denoting the path to your slice of the store.
A complete example can be shown here:
import React, { Component } from 'react'
import { render } from 'react-dom'
import { UseStore } from 'rzero-tools'
import { createStore, Provider } from 'redux-zero/react'
const store = createStore({
pages: {
home: {
name: "Example Home Page Title"
}
}
})
@UseStore(store, 'pages.home', 'page')
class Home extends Component {
changeName() {
this.props.updateState({name: 'A contrived title'})
}
render() {
// The default injected variable is called page, so the third parameter
// to the decorator can be omitted if the property name "page" is
// acceptable. Otherwise, modify this to be what you want.
let { page } = this.props
// Note that if you invoked this.changeName() via a timeout or click,
// it would fire an update that only modified the state.pages.home object
// as specified in the path of the @UseStore decorator.
return (
{/* As you might imagine this is "Example Home Page Title" */}
<div>{page.name}</div>
)
}
}
render(
<Provider store={store}><Home/></Provider>,
document.querySelector('#react-root')
)
The important bit above is the decorator, @UseStore()
, used to connect the
component to the store as well as being able to read and write to specific part
of the store.
A noteworthy callout is the fact that by simply specifying 'pages.home'
, the
component is given the part of the store that maps to
store.getState().pages.home
.
If the path is left off or is supplied as an empty string, then the entire state is supplied.
Caveats / TODOs
Important
- Currently, due to the way this was built, the path specified in the store should all consist of objects or bad things will happen to your store.
- There may be a way to refactor things in the future, perhaps in a 2.0 release, where the store does not have to be passed to the decorator.
These would be ideal and if I continue to use redux-zero
I'll focus on these
two points as my primay next steps.