How to handle initialized user input

[DavidHenri008]

Hi, I am new to redux and I have hard time to figure out the best way to handle user input that can be initialized. This comes to a two-way binding sort of thing.

Let say I have a simple paper-checkbox that needs to be initialized according to the state value. I can easily [[one-way bind]] its checked property to a statePath of my store so the webcomponent can be checked according to the value in the store. However, what if I also want to update the store when the checkbox is clicked by the user, how should I proceed. Because of the read-only rule, I cannot use classic {{two-way binding}}.

What is the best way to implements this behavior?

Thanks

[tur-nr]

So somewhere in your component template your checkbox will live. Listen to the onChange event like so;

<paper-checkbox
  on-change="handleCheckboxChange"
  checked="[[checkboxChecked]]">
    Click to update store.
</paper-checkbox>

Then in the event listener you would dispatch an action;

function handleCheckboxChange(event) {
    this.dispatch({
        type: 'SET_CHECKBOX_CHECKED',
        checked: event.target.checked,
    });
}

Then you would just implement this action into your reducer for Redux to handle;

function reduxReducer(state, action) {
    if (action.type === 'SET_CHECKBOX_CHECKED') {
        // Update the state and allow polymer-redux bindings to handle the rest
        return Object.assign({}, state, { checkboxChecked: action.checked });
    }
}

[DavidHenri008]

Ok. So I have a one-way binding only from store to my checkbox value and I rely on change event to trigger an update of the store when the user interacts with the input. Does this mechanism may be applied to all user input types? Would it make sense to update the store on every characters the user inputs in a textbox?

Thanks

[tur-nr]

I think you need to work out when and if you should use your redux store for the feature you are building.

Two-way bindings is a powerful concept in Polymer, but it doesn't fit into the flux paradigm, which is what Redux is trying to achieve, kinda. If redux is your store management within your application and you handling user inputs. My suggestion would be; use Polymer for the user interaction of the field and when the user is finished trigger an action that would update the state. So put your two way bindings on when the user is typing, however when the user leaves the input, submits the form or presses <return> dispatch an action.

You can dispatch an action an each key-stroke, however dispatching an action will cause polymer-redux to recalculate state changes for each element that extends your ReduxMixin. It's a little wasteful if you can achieve the above smarts.

Good luck.

[DavidHenri008]

Great, I think I have a better idea now of how to use the store. Thanks!