Revux

Redux bindings for Vue.js

Version: 1.3.1 Updated: 08/15/2019

By: edvincandon License: ISC

Downloads Last 30 Days: 574

Install

npm i revux
yarn add revux

Repository: https://github.com/edvincandon/revux

CDNs

bundle.run: https://bundle.run/revux

jsDelivr: https://cdn.jsdelivr.net/npm/revux

unpkg: https://unpkg.com/revux

revux

npm version Build Status Coverage Status

Inspired by Revue, use Redux with Vue.js seamlessly

We were not satisfied with the way the original Revue worked internally.

Basically, revux 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: it aims to make the use of redux with vuejs a little more like react-redux

Installation

Install via NPM: npm i --save revux

API

connect connect([mapState], [mapDispatch])(Component)

mapState function is passed the state and the connected component's own props: mapState(state, [ownProps]) it should return a state object.

mapDispatch should be an object wrapping action creator functions - dispatch is bound automatically via redux's > bindActionCreators : mapDispatch = { foo: () => ({type: 'ACTION_CREATED'}) }

the result of mapState and mapDispatch will be accessible on your component's data properties

Getting started

For Vue-Router integration: check out the example folder

More details coming soon

store.js

Create your redux store:

import {createStore} from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

index.js

import Vue from 'vue'
import revux from 'revux'
import main from './main.vue'

Vue.use(revux) // !!!

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

main.vue

Use the Provider component from revux and bind your redux store. The store will be provided to all children components via vue's inject/provide mechanism.

<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

Import the connect method from revux to map state and actions to your instance's data. Here our state looks something like { status: 'foobar' }

<template>{{status}}</template>

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

  const component = {
    methods: {
      doMagic: function () {
        this.createAction()
      }
    }
  }

  const mapState = state => {
    const { status } = state
    return {
      status
    }
  })

  const mapDispatch = { createAction }

  export default connect(mapState, mapDispatch)(component)
</script>

NB:

You can also pass an object to mapState. Top-level object properties should be functions that get passed the state.

  const mapState = {
    status: state => state.status
  }

TODO:

  • Remove redux dependency
  • Clean up dev environement (rollup, poi, karma etc..)
Categories: Vue js