mirror of
https://github.com/marko-js/marko.git
synced 2025-12-08 19:26:05 +00:00
62 lines
1.3 KiB
Markdown
62 lines
1.3 KiB
Markdown
# 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);
|
||
```
|