Step 1: How to use Redux with Polymer 2

A 3-step tutorial on how to integrate Redux into a larger Polymer 2 app showcasing a working example.

I assume you’ve heard of Christopher Turner’s tur-nr/polymer-redux element. We are using his element and showcase a working todo list app.

Step-1 shows how to use polymer-redux. If you are already familiar with polymer-redux, continue with Step-2!

// If you want to clone this tutorial:
git clone https://github.com/JaySunSyn/ReduxTodo.git

Install dependencies

bower i -S tur-nr/polymer-redux

and redux itself with npm:

npm install --save redux

Create a folder named redux where we put in all our redux related files and create a file named redux-mixin.html.

In the current step of this tutorial, we pack everything into one file.

Creating the Reducer

A reducer is a pure function that takes the previous state and an action and returns the next state.

The most basic reducer is in the polymer-redux example which is a function taking state and action as attributes and always returns the same state.

(state = {}, action) => state

In our example, we want to modify the state depending on the passed in action. We then return (a copy) of the modified state.

Let’s go through the file step by step.

After importing the dependencies, we tell Redux what our initialState should look like. In our case, we predefine three todos.

const initialState = { 
    todos: [ 
        {text: ‘Buy Veggies’},
        {text: ‘Buy Fruits’},
        {text: ‘Buy Pizza’},
    ],
};

(We could also define our todos as an empty array and then load the actual todos from our server which we will discuss in step 3 of this tutorial.)

Next, we’ll define the reducer itself and return the initial state if our previous state is not defined.

if (!state) { return initialState; }

Now it’s time to check which action we should take to modify our state. For that, let’s switch through the action.type property.

const todos = state.todos.slice(0);
switch (action.type) { 
    case ‘ADD_TODO’: 
        todos.push(action.todo); 
    break;
    case ‘REMOVE_TODO’: 
        todos.splice(todos.indexOf(action.todo), 1); 
    break; 
}

We defined two actions. ADD_TODO adds a todo to the todos array and REMOVE_TODO removes one.

In Redux, we do not modify the passed in state but rather make a copy of the state, modify that copy and return a copy of the modified state.

return Object.assign({}, state, {todos: todos});

Now we only have to create the store as well as the mixin we will use in our Polymer elements.

const store = Redux.createStore(reducer);
const ReduxMixin = PolymerRedux(store);

We created ReduxMixin which we can use in our elements to give them redux magic.

The question you might have now is: How can we trigger the reducer to be called from our element?

Using the ReduxMixin in our elements

In our example, we have two elements using Redux.

<todo-list> and <todo-input>

Both of them work similarly. They only trigger different actions.

Let’s take a look at <todo-list>:

Now let’s take a step-by-step look at the file.

The first thing we notice is that TodoList extends our previously definedReduxMixin. Doing so, TodoList obtains Redux magic.

class TodoList extends ReduxMixin(Polymer.Element)

The one piece of unique syntax the ReduxMixin is going to give us is an additional attribute called statePath. What statePath is doing is to tell Redux what the path of this ‘todos’ property is in this big global state object. So in our case, the path is just ‘todos’.

static get properties() { 
    return { 
        todos: { 
            type: Array, 
            statePath: ‘todos’, 
        }, 
    }; 
}

Next thing to notice is that we added actions the same way as we added properties.

static get actions() { 
    return { 
        remove: (todo) => { 
            return { type: ‘REMOVE_TODO’, todo: todo, }; 
        }, 
    }; 
}

actions() returns an object with the remove attribute (we can call it however we want). The value is always a function which returns an object with a ‘type’ property and maybe some other properties we can reference from our reducer. In our case a ‘todo’ property.

How do we trigger the reducer function to get called?

this.dispatch(‘remove’, todo);

We call this.dispatch('name_of_action') to call the reducer with our action. The switch statement will be executed, etc. and the state will eventually get modified.

Yay! We did it.

Our other element TodoInput works similarly. Take a look at the file on GitHub!

Now run polymer serve -o and notice that our todos get listed without having bound them to any other polymer property. Try to click on a todo to check if the remove action works as expected.

Jalal Fathi is freelance software developer and startup founder. Passionate about web technologies and in love with Polymer. Learn more about how he can help you to create your next digital product. He works wherever he wants and tries to catch a good swell wherever he can. He wrote this bio by himself while writing in third person.

Next, see how we can structure larger Polymer apps, so it does not get messy if the app grows.

Step 2: How to structure larger Polymer 2 apps with Redux Reselect