marko/docs/redux.md

UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.

# Redux + Marko

See the [`marko-redux` sample project](https://github.com/marko-js/examples/tree/master/examples/redux) for a fully-working example.

## Installation

First, save the [`marko`](https://www.npmjs.com/package/marko) and [`redux`](https://www.npmjs.com/package/redux) packages to your project’s dependencies:

```bash
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`

```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`

```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:

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

export default redux.createStore(counter);
```