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:
const store =
index.js
Vue // !!! const app = el: '#app'
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> { 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> // createAction is an action creator of type () => ({type: 'ACTION_CREATED'}) const component = methods: { this } const mapState = { const status = state return status }) const mapDispatch = createAction mapState mapDispatchcomponent</script>
NB:
You can also pass an object to mapState. Top-level object properties should be functions that get passed the state.
const mapState = statestatus
TODO:
- Remove redux dependency
- Clean up dev environement (rollup, poi, karma etc..)