Here is a simple example with pure redux dependency:

import { component, html, useState, useEffect } from "haunted";
import { createStore } from "redux";

const counter = (state = 0, action) => {
  switch (action.type) {
    case "INCREASE":
      return state + 1;
    case "DECREASE":
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counter, 0);

const useSelector = selector => {
  const [data, setData] = useState(selector(store.getState()));
  useEffect(() => {
    return store.subscribe(() => {
      const d = selector(store.getState());
      setData(d);
    });
  }, [selector]);
  return data;
};

const useDispatch = () => action => store.dispatch(action);

const App = () => {
  const val = useSelector(s => s);
  const dispatch = useDispatch();
  return html`
    <p>val=${val}</p>
    <button @click=${() => dispatch({ type: "INCREASE" })}>+</button>
    <button @click=${() => dispatch({ type: "DECREASE" })}>-</button>
  `;
};
customElements.define("my-el", component(App));

Did not test it much yet though and probably can be improved ...

Redux Support #126

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions