Polymer Redux Support
Polymer Redux (updated)
Polymer Redux is a powerfull integration between
Polymer Redux and let you use it from dart in a seamless way.
This example will show how to build a simple component updating a list of elements using
Polymerize is using a modified version of
polymer-redux in order to be more compliant
with the dart language.
The original version had two problems.
- it defines a function that will generate a mixin from a redux
- the store instance is bound to the mixin and it is unique for the application
The first point is a problem because in dart is not possibile to define a class dynamically.
The second doesn’t allow for encapsulating a redux component inside another redux component easily.
Model, actions, reducer
Let’s start for the model. The model is our immutable data structure. In our example our model will consist in a
In order to update the model we have to define some
actions and a
reducer is nothing else than a
function that produces a new version of the model given the previous version and an
action rappresent a specific change that we want to apply to the model: an object that conveys all the information needed for the
reducer to do a specific change on the model.
Let’s start by defining two different actions to updated our model: one action to add a new
Item to the items list and another one to remove an
Item from the list of items:
For commodity we have defined two static methods that will create the actual
ReduxAction we need. A
ReduxAction is an object with a
type and a
type should be an identifier that uniquely identifies a change that we want to apply to the model, while the
detail is the payload we need in order to accomplish the change (the item we want to add or the index we want to remove in the example).
And here it comes the
reducer for our model and actions :
The main reducer function is :
while for the todo list we have :
These methods basically generates a new version of the model given the previous version and the action. For example when adding a todo a new model is generated that has a list that is the same of the previous with that element added.
The Store and the component
Now its time to put the things together and define our
Let’s start be declaring a global store instance then we will define the mixin that every components that want to share the same model will have to use:
The mixin must “extend” the
DartCallbacksBehavior. The first is needed
to implement a redux behavior, the latter in order to use callbacks in dart without having to worry about calling
the super implementation.
readyPostHook we set the
store property (that comes with
ReduxLocalBehavior) so that every component
MyReduxMixin will get the store automatically set.
Please note that defining a new behavior is an optional step (you could use
ReduxLocalBehavior directly, and set
store in many different ways). But is a good practice to encapsulate that logic in a single behavior.
Finally we can define our component :
Let’s examine it with attention. First of all, in order to have access to the store the component just have to mixin the newly defined redux mixin
To bind component properties to paths in the store just use
@Property annotation with the
To dispatch an action use the
dispatch method (that comes with the
When the user clicks on the “Add one” button the
addMyItem method will be called that will create and dispatch the
ADD_ITEM action to the store. Then the
reducer will be used to produce a new version of the model and the properties bound to the store will be updated.
When the user clicks on the “Remove me” similarly will happen for the
REMOVE_ITEM action and the item gets removed.
Polymer with Redux rocks. And with Dart rocks twice ! Enjoy.