Nice Philanthropist Metalhead
    Have ideas to improve npm?Join in the discussion! »

    redux-view-binder

    0.0.10 • Public • Published

    redux-view-binder

    Build Status Coverage Status
    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
    );
     

    Install

    npm i redux-view-binder

    DownloadsWeekly Downloads

    2

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    166 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar