Redux vue

Vue Redux binding higher order component

Version: 0.7.1 Updated: 01/10/2017

By: nadimtuhin License: MIT

Downloads Last 30 Days: 250

Install

npm i redux-vue
yarn add redux-vue

Repository: https://github.com/nadimtuhin/redux-vue

CDNs

bundle.run: https://bundle.run/redux-vue

jsDelivr: https://cdn.jsdelivr.net/npm/redux-vue

unpkg: https://unpkg.com/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);
Categories: Vue js