edvincandon/revux

🧞‍♂️ Use Redux with Vue.js seamlessly [abandoned]

revux

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..)

revux's Issues

Making the signature for mapDispatch more similar to the mapState signature

Hi there!

Thanks for this little library. I couldn't manage to make Revue or vue-redux work. I'm curious as to why you chose to expect different things for mapDispatch and mapState.

Would it be a good idea to also expec an object for mapState? I'd be more comfortable with something like this:

const mapState = {
  todos: state => state.todos.index,
  todo: state => state.todos.single,
}
const mapDispatch = {
  addTodo: todoActions.create,
}

connect(mapState, mapDispatch)(AwesomeComponent)

This is an issue mostly about aesthetics and consistence. The API works perfectly as-is.

Injection $$store not found

I don't know why the console gives the error that injection $$store not found.

mapState function with access to props - feature request

Is it possible to add access to props in mapState like in react-redux
mapStateToProps(state, [ownProps]): stateProps
https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

How to create Provider with a store key?