Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
index.js
index.template.html
package.json
webpack.config.js

README.md

Using Redux with Panel

The example in this directory recreates the basic 'counter app' from the README, but models the state interactions with the store/dispatch system of Redux:

// action creators
const incrCounter = () => ({type: 'INCREMENT'});
const decrCounter = () => ({type: 'DECREMENT'});

// reducer
const reducer = (state={count: 1}, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return Object.assign({}, state, {count: state.count + 1});
    case 'DECREMENT':
      return Object.assign({}, state, {count: state.count - 1});
    default:
      return state;
  }
}

const store = createStore(reducer);

customElements.define('counter-app', class extends Component {
  get config() {
    return {
      defaultState: store.getState(),

      template: props => h('div.counter', [
        h('div.val', `Counter: ${props.count}`),
        h('div.controls', [
          h('button.decr', {on: {click: () => store.dispatch(decrCounter())}}, '-'),
          h('button.incr', {on: {click: () => store.dispatch(incrCounter())}}, '+'),
        ]),
      ]),
    };
  }
});

const counterApp = document.querySelector('counter-app');
store.subscribe(() => counterApp.update(store.getState()));

The store.subscribe() call at the bottom ensures that any dispatched actions will propagate the resulting state to the Panel app.

To install and run the example from this directory: npm install && npm start. The page will be served on localhost:8080 by Webpack dev server.

You can’t perform that action at this time.