redux-vuex

redux-vuex

Redux bindings for VueJS inspired by Vuex.

👉 For the old Vue 2 version check out the legacy branch 👈

First things first

Why don't you use vuex instead?

Redux and vuex are really hard to compare. Vuex is a state management pattern that clearly defines each subject of the state lifecycle. For most of the projects this helps a lot structuring your application but it also leaves a large architectural footprint.

Redux on the other hand is very adaptable to different scenarios giving you the ability to customize everything around state management like handling side effects (see redux-effects, redux-saga or redux-thunk) or even adapting full application flows like rematch.

Yay, yet another redux lib for VueJS

Valid point, it seems the needs for integrating with redux is strong. So depending on your requirements you may want to use:

• vuejs-redux if you want provider bindings like react-redux
• vdeux if you want a different kind of component bindings. However, it's archived.
• revue also for nice store bindings but unfortunately its dead :(

Installation

redux-vuex is written in pure es6 and only has dependencies to the beautiful crafted packages get-value and set-value

Get the Package

npm i redux-vuex@next // yarn add redux-vuex

Connect it to your Vue application

import { createApp } from 'vue'
import { provideStore } from 'redux-vuex'

import App from './App.vue'
import { store, actions } from './store'

const app = createApp(App)

provideStore({
  app,
  store,
  actions
})

app.mount('#app')

Usage

redux-vuex is focused on simplifying the access to the redux state and bind state changes to the vue instance in an efficient way.

mapState

To assign state with ease to your component mapState needs to be used. You can pass a function that has access to the state object:

import { mapState } from 'redux-vuex'

export default {
  name: 'My Vue Component',
  setup() {
    return mapState({
      todoList: (state) => state.todos // maps state.todos to data.todoList
    })
  }
}

You can also directly pass store selectors to have mapState automatically infer the resulting state object

import { mapState } from 'redux-vuex'

export default {
  name: 'My Vue Component',
  setup() {
    return mapState({
      todoList: selectors.todos // maps the result returned by the `todos` selector to data.todoList
    })
  }
}

mapActions

For a more convenient action dispatching mapActions can be used.

const actions = {
  foo: (payload) => {
    type: 'FOO', 
    payload
  }
}

import { mapActions } from 'redux-vuex'

export default {
  name: 'My Vue component',
  setup() {
    return mapActions({foo: actions.foo}) // creates scoped functions for foo and bar action
  }
  mounted() {
    this.foo('bar') // will dispatch { type: 'FOO', payload: 'bar' }
  }
}

store

Finally, if you need direct access to the store, each component has a binding to the store assigned:

import { inject } from 'vue'
import { injectStore, injectActions } from 'redux-vuex'

export default {
  name: 'My Vue component',
  setup() {
    const store = injectStore()
    const actions = injectActions()

    store.subscribe(() => {
      console.log(store.getState())
    })

    store.dispatch({
      type: 'foo',
      payload: 'bar'
    })
  }
}

Caveats

If you return more than the mapState from the setup make sure to bind the result to a dedicated property. Otherwise the Vue proxies won't work 😑

import { mapState } from 'redux-vuex'

export default {
  name: 'My Vue Component',
  setup() {
    return {
      state: mapState({
        todoList: (state) => state.todos // maps state.todos to data.todoList
      }),
      ...mapActions(...)
    }
  }
}

How it works

• provideStore provides the redux store for composable components
• mapState creates a reference binding form the redux store
• Each Vue Component with bindings creates a store subscription
• On each state change all bindings are evaluated and update
• Only the mapped properties are retrieved from store and set

License

MIT