redux-vue

redux-vue

Redux bindings for Vue 2 — a higher-order component (HOC) that connects Vue components to a Redux store, similar to react-redux's connect().

Vue 2 only. This library targets Vue 2.x. For Vue 3, use Pinia or vuex 4.x.

Install

npm install redux-vue
# or
yarn add redux-vue

Setup

Register the plugin on your root Vue instance so all child components can access the store:

// main.js
import Vue from 'vue';
import { reduxStorePlugin } from 'redux-vue';
import store from './store';
import App from './App';

Vue.use(reduxStorePlugin);

new Vue({
  store,
  render: h => h(App),
});

Usage

connect(mapStateToProps, mapDispatchToProps, [mergeProps])(Component)

Wraps a Vue component and injects store state and dispatch functions as props.

// components/TodoApp.js
import { connect } from 'redux-vue';

const TodoApp = {
  props: {
    todos: { type: Array },
    addTodo: { type: Function },
  },
  render(h) {
    return (
      <div>
        <ul>{this.todos.map(t => <li>{t}</li>)}</ul>
        <button onClick={() => this.addTodo('new item')}>Add</button>
      </div>
    );
  },
};

const mapStateToProps = state => ({ todos: state.todos });

const mapDispatchToProps = dispatch => ({
  addTodo: todo => dispatch({ type: 'ADD_TODO', payload: todo }),
});

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

Single-file components

// components/App.js
import { connect } from 'redux-vue';
import Comp from './Comp.vue';

const mapStateToProps = state => ({ count: state.count });
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Comp);

API

connect([mapStateToProps], [mapDispatchToProps], [mergeProps])(Component)

Pass-through props — props not declared in the map functions are forwarded to the wrapped component automatically.

Slots — slot content on the connected wrapper is forwarded to the inner component.

reduxStorePlugin

A Vue plugin. Call Vue.use(reduxStorePlugin) once with store set on the root instance. All descendant components will have this.$store available.

Examples

mergeProps

const mergeProps = (stateProps, dispatchProps) => ({
  fullCount: stateProps.count * 2,
  onAdd: dispatchProps.addTodo,
});

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(App);

Pass-through props

<!-- nonMappedProp is not in mapStateToProps — it still reaches the wrapped component -->
<ConnectedApp nonMappedProp="Foo" />

Slots

<ConnectedApp>
  <span>This slot content is forwarded to the inner component</span>
</ConnectedApp>

Store example

// store.js
import { createStore } from 'redux';

const initialState = { todos: [] };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.payload] };
    default:
      return state;
  }
};

export default createStore(reducer);

Development

git clone https://github.com/nadimtuhin/redux-vue.git
cd redux-vue
npm install
npm test

Tests live in src/*.spec.js and use Mocha. See CONTRIBUTING.md for contribution guidelines.

License

MIT © Nadim Tuhin