Redux bindings for VueJS inspired by Vuex.
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.
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
- revue also for nice store bindings but unfortunately its dead :(
redux-vuex is written in pure es6 and only has dependencies to the beautiful crafted packages get-value and set-value
npm i redux-vuex@next // yarn add redux-vuex
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')redux-vuex is focused on simplifying the access to the redux state and bind state changes to the vue instance in an efficient way.
To assign state with ease to your component mapState needs to be used. It has two different signatures, depending on your component needs:
If you want a 1:1 relationship between your redux store's state property names and your vue component's data then pass the names of these properties from redux as string arguments to mapState:
import { mapState } from 'redux-vuex'
export default {
name: 'My Vue Component',
setup() {
return mapState('users', 'todos') // maps state.users and state.todos to data.users and data.todos
}
}Alternatively, if you provide an object to mapState you can specify data property names.
import { mapState } from 'redux-vuex'
export default {
name: 'My Vue Component',
setup() {
return mapState({
users: 'users', // maps state.users to data.users
todoList: 'todos' // maps state.todos to data.todoList
})
}
}You can pass a function that has access to the state object if you want to
import { mapState } from 'redux-vuex'
export default {
name: 'My Vue Component',
setup() {
return mapState({
state: (state) => ({ todoList: state.todos, users: state.users }) // maps state.todos to data.state.todoList and state.users to data.state.users
})
}
}You can use the last two methods together like so
import { mapState } from 'redux-vuex'
export default {
name: 'My Vue Component',
setup() {
return mapState({
users: 'users', // maps state.users to data.users
todoList: (state) => state.todos // maps state.todos to data.todoList
})
}
}Note: using the object notation gives you the ability to use store selectors.
For a more convenient action dispatching mapActions can be used. To use this helper you need to pass in the actions in the connect function (see above):
const actions = {
foo: payload => {
type: 'FOO', payload
},
bar: () => {
type: 'BAR', payload: { bar: 'baz' }
}
}import { mapActions } from 'redux-vuex'
export default {
name: 'My Vue component',
setup() {
return mapActions('foo', 'bar') // creates scoped functions for foo and bar action
}
mounted() {
this.foo('baz') // will dispatch { type: 'FOO', payload: 'baz' }
}
}If you need to dispatch multiple actions in one method (or want to assign different names), use the object notation:
import { mapActions } from 'redux-vuex'
export default {
name: 'My Vue component',
setup() {
return mapActions({
baz: ({ dispatch, actions }, arg1, arg2) => {
dispatch(actions.foo(arg2))
dispatch(actions.bar())
}
})
}
mounted() {
this.baz('foo', 'bar') // will dispatch foo and bar actions
}
}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'
})
}
}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({
users: 'users', // maps state.users to data.users
todoList: (state) => state.todos // maps state.todos to data.todoList
}),
...mapActions('foo', 'bar')
}
}
}provideStoreprovides the redux store for composable componentsmapStatecreates 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 setted
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent