redux-vue

vue redux binding higher order component

Vue Redux is tested to work on vue v2 and should be used with vue-jsx or in component template string. For more on vue-jsx https://github.com/vuejs/babel-plugin-transform-vue-jsx

Install

install through npm i redux-vue --save

Initialize

install in your root component

// main.js
import Vue from 'vue';
import { reduxStorePlugin } from 'redux-vue';
import AppStore from './AppStore';
import App from './Component/App';
 
// install redux-vue
Vue.use(reduxStorePlugin);
 
new Vue({
    store: AppStore,
    render(h) {
    	return <App />
    }
});

// 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.data.todo]
      }
 
    default:
      return state;
    }
}
 
const AppStore = createStore(reducer);
 
export default AppStore;

Use in your component

// components/App.js
 
import { connect } from 'redux-vue';
 
const App = {
    props: {
        todos: {
            type: Array,
        },
        addTodo: {
            type: Function,
        },
    },
 
    methods: {
        handleAddTodo() {
            const todo = this.$refs.input.value;
            this.addTodo(todo);
        }
    },
 
    render(h) {
        return <div>
            <ul>
                {this.todos.map(todo => <li>{todo}</li>)}
            </ul>
 
            <div>
                <input type="text" ref="input" />
                <button on-click={this.handleAddTodo}>add todo</button>
            </div>
        </div>
    }
};
 
function mapStateToProps(state) {
    return {
        todos: state.todos
    };
}
 
function mapActionToProps(dispatch) {
    return {
        addTodo(todo) {
            dispatch({
                type: 'ADD_TODO',
                data: { todo }
            })
        }
    }
}
 
export default connect(mapStateToProps, mapActionToProps)(App);