redux-view-binder

Bind your web-component views easily with Redux (no React, no Polymer).

Binding Views

Redux is a very nice library to centralize the management of the state of your application. The goal of redux-view-binder is to provide a small helper to 'bind' your views to your Redux state changes. Simply said, it means refreshing your views based on the changes of your Redux state automatically.

If you are using React, you might want to have a look at react-redux which provide this capability and more. Redux-view-binder is framework agnostic and can be used with any View library.

Quick example, let's imagine we have a todolist view, where we display a list of todos. Inside our Redux state we have a todos field.

// Import ReduxViewBinder in case of es module
import ReduxViewBinder from 'redux-view-binder';

// Create binder using store from Redux
const binder = new ReduxViewBinder(store);

//... some time later
//retrieve the web component
let todoList = document.querySelector('#todolist');

//bind the component to Redux state changes
binder.bind(
    (state) => { return state.todos; }, //only watch changes of todos field.
    (todos) => { // the watch field is passed to the onChange method.   
        //if todos field has changed then we should refresh  the todoList view
        todoList.refresh(todos);
    }
);

Optional parameters

Here is the bind method signature

bind(watch, onChange, [view], [filter])

In some cases you want to pass the view to the binder, the view will be provided to the onChange method as the second parameter.

In some other case you want to pass to the onChange method another field from the Redux state object than the one that is watched. In that case the filter method can be used.

Example of usage

// Import ReduxViewBinder in case of es module
import ReduxViewBinder from 'redux-view-binder';

// Create binder using store from Redux
const binder = new ReduxViewBinder(store);

//... some time later
//retrieve the web component
let todoList = document.querySelector('#todolist');

//... some time later
//bind the component to Redux state changes
binder.bind(
    (state) => { return state.todos; }, //only watch changes of todos field.
    (state, view) => { // the watch field is passed to the onChange method.   
        //if todos field has changed then we should refresh  the todoList view
        view.refresh(state.todos);
    },
    todoList, //pass the view object, will be passed to the onChange method as second parameter
    (state) => { return state; } // passing the full state object instead of only the todos field
);