marko/packages/runtime-class/docs/redux.md

Redux + Marko

See the marko-redux sample project for a fully-working example.

Installation

First, save the marko and redux packages to your project’s dependencies:

npm i marko redux

Usage

The partial code below shows how a Marko UI component can connect to a Redux store, using Redux’s store.subscribe() method and Marko’s forceUpdate() method:

counter.marko

import store from './store.js';

class {
  onMount () {
    store.subscribe(() => {
      // Force this UI component to rerender
      this.forceUpdate();

      // The UI component will rerender with the new
      // state returned by `store.getState()`
      //
      // You could also force an update like this:
      // this.input = store.getState();
    });
  }
}

<counter(store.getState()) />

reducer.js

export default function (state, action) {
  state = state || { value: 0 };

  // Additional reducer logic here…

  return state;
}

store.js

In counter.marko, the imported store module exports a Redux store created with the following code:

import redux from "redux";
import counter from "./reducer.js";

export default redux.createStore(counter);