# revue2

> Redux bindings for Vue.js

Latest version **0.0.9** (published 2017-06-09) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install revue2
pnpm add revue2
yarn add revue2
bun add revue2
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2017-06-09 |
| First published | 2017-06-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Edvin CANDON |
| Maintainers | edvincandon |
| Keywords | revue, redux, vue, vuejs |

## Links

- npm: https://www.npmjs.com/package/revue2
- Repository: https://github.com/edvincandon/revue2
- Homepage: https://github.com/edvincandon/revue2#readme
- Issues: https://github.com/edvincandon/revue2/issues
- npm.io page: https://npm.io/package/revue2

## Recent versions

- 0.0.9 (latest) — 2017-06-09
- 0.0.8 — 2017-06-08
- 0.0.7 — 2017-06-08
- 0.0.6 — 2017-06-08
- 0.0.5 — 2017-06-07
- 0.0.4 — 2017-06-07
- 0.0.3 — 2017-06-07
- 0.0.2 — 2017-06-07
- 0.0.1 — 2017-06-07

## README

# Revue2 (WIP)
Inspired by Revue, use Redux with Vue.js seamlessly
> We were not satisfied with the way the original Revue worked internally.

> Basically, Revue2 works by referencing your redux store on a Provider component. Every child component of the Provider will be able to access the store via a $connect method available on all Vue instances: it aims to make the use of redux with vuejs a little more like react-redux

# Installation
Install via NPM: `npm i --save revue2`

# Getting started
> For **Vue-Router integration**: check out the example folder

> More details coming soon

**store.js**

Create your redux store:
```js
import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store
```

**index.js**

```js
import Vue from 'vue'
import store from './store'
import main from './main.vue'

Vue.use(Revue) // !!!

const app = new Vue({
  el: '#app',
  render: h => h(main)
})
```

**main.vue**

Use the Provider component from Revue2 and bind your redux store. The store will be provided to all children components.

```js
<template>
    <Provider :store="store">
      <connectedComponent></connectedComponent>
    </Provider>
</template>

<script>
  import store from './store'
  import connectedComponent from './connectedComponent.vue'

  export default {
    data () {
      return {
        store
      }
    },
    components: {
      connectedComponent
    }
  }
</script>
```

**connectedComponent.vue**

Use the `$connect` method to map state to $data and map actions to dispatch.
Here our state looks something like `{ status: 'foobar' }`

**Be sure to declare your mapped $data properties in your component's data definition for them to be reactive**

```js
<template>{{status}}</template>

<script>
  import { createAction } from './actions'
  // createAction is an action creator of type () => ({type: 'ACTION_CREATED'})

  const mapState = state => {
    const { status } = state // deeply nested state support as well
    return {
      status // must match data property
    }
  })

  const mapDispatch = { createAction } // will be added to vm instance

  export default {
    data () {
      return {
        status: null // define it to be reactive
      }
    },
    created () {
      this.$connect(mapState, mapDispatch)
    }
    methods: {
      doMagic: function () {
        this.createAction() // thanks to $connect
      }
    }
  }
</script>
```

---
_Source: https://npm.io/package/revue2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._