Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edvincandon/revux
🧞♂️ Use Redux with Vue.js seamlessly [abandoned]
https://github.com/edvincandon/revux
redux revue vuejs vuejs2
Last synced: 26 days ago
JSON representation
🧞♂️ Use Redux with Vue.js seamlessly [abandoned]
- Host: GitHub
- URL: https://github.com/edvincandon/revux
- Owner: edvincandon
- Created: 2017-06-07T07:26:12.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-08-15T10:21:36.000Z (about 5 years ago)
- Last Synced: 2024-09-29T13:41:01.305Z (about 1 month ago)
- Topics: redux, revue, vuejs, vuejs2
- Language: JavaScript
- Homepage:
- Size: 768 KB
- Stars: 26
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# revux
[](https://badge.fury.io/js/revux)
[](https://travis-ci.org/edvincandon/revux)
[](https://coveralls.io/github/edvincandon/revux?branch=master)
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:
```js
import {createStore} from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
```
**index.js**
```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.
```js
import store from './store'
import connectedComponent from './connectedComponent.vue'
export default {
data () {
return {
store
}
},
components: {
connectedComponent
}
}
```
**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' }`
```js
{{status}}
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)
```
**NB:**
You can also pass an object to mapState.
Top-level object properties should be functions that get passed the state.
```js
const mapState = {
status: state => state.status
}
```
**TODO:**
- [x] Remove redux dependency
- [ ] Clean up dev environement (rollup, poi, karma etc..)