This document discusses using Redux with Polymer frameworks. It notes that Polymer components are decentralized while data needs centralization, creating problems with asynchronous state changes. Redux is presented as a solution with its principles of single state source, read-only state, and pure function changes. It describes connecting Polymer and Redux through a binding library, dispatching actions, and using selectors to optimize data access. Best practices are outlined like splitting UI/data code, matching store shape to components, and resolving clashes between Polymer mutations and Redux immutability.

1. Collaborne
Using Redux with Polymer
Ronny Roeller (CTO Collaborne)

2. Collaborne
 Data within app needs to be in sync (focus of
presentation)
 Data between users needs to be in sync
What’s the problem?

3. Collaborne
 Good: Frontend is heavily decentralized via its
components (Polymer)
 Data binding for centralization
 Problem: every component can mutate the state (+
asynchronicity)
 Very common issue: Facebook private messages
counter led to Flux pattern (not a technology) – see talk
Learn more: “Polymer loves Redux” (Medium)
Components vs. Centralization

4. Collaborne
 Most widely used Flux implementation
 Three principles
1. Single source of truth (app state is stored in one
object)
2. State is read only
3. Changes are made with pure functions
Learn more: Dan’s introduction and advanced course
What’s Redux?

5. Collaborne
 UI dispatches actions:
{
type: 'SET_TODO_STATE',
done: true
}
 Reducers listens to actions and create new state:
reducer(state, action) {
if (action.type === 'SET_TODO_STATE') {
return {
status: action.done ? 'done' : 'open'
};
...
Actions & Reducers

6. Collaborne
How does this help?
* Source: Facebook

7. Collaborne
 Dev Tools extension (Chrome)
 Time travel / undo
 Actions
 State object
Demo

8. Collaborne
 Polymer-redux is a super thin Polymer binding library
 Bind a property:
const ReduxBehavior = PolymerRedux(MyReduxStore);
Polymer({
is: "my-element",
properties: {
todos: {
type: Array,
statePath: "todos.all",
readOnly: true
},
},
behaviors: [
ReduxBehavior
]
Connecting Polymer + Redux 1/2

9. Collaborne
 Dispatch an action:
this.dispatch({
type: 'TOGGLE_TODO',
id: id
});
Learn more: “Polymer loves Redux” (Medium)
Connecting Polymer + Redux 2/2

10. Collaborne
 UI components shouldn’t know about state shape
 Access derived data (look up table + current person ID)
without unnecessary computation
 Selectors calculate & cache:
const personSelector = Reselect.createSelector(
state => state.ui.person.personId,
state => state.data.people.byId
(personId, byId) => byId[personId]
);
Learn more: “Selectors in polymer-redux” (Medium)
Selectors

11. Collaborne
 Reducers should be composed (pure functions):
reducer(state, action) {
return {
users: uiUsersReducer(state.users, action),
groups: uiGroupsReducer(state.groups, action)
}
};
• Split UI components from Redux
• Split Redux code by data/ui
• Match component structure with store shape
Learn more: “Organize Large Redux Projects” (Medium)
Code organization

12. Collaborne
 Generally Polymer and Redux work very well together
 Be careful where Polymer expects mutations (instead of
a new object), e.g. lists might flicker
 Translate between Redux object and Polymer property
var splices = Polymer.ArraySplice.calculateSplices(
reduxItems,
polymerItems);
polymerItems.length = 0;
polymerItems.push(...reduxItems);
this.notifySplices(‘polymerItems’, splices);
Learn more: “Stop Polymer lists from flickering” (Medium)
Polymer vs. Redux clashes

13. Collaborne
Questions?
@ronnyroeller
Learn more on our Engineering Blog