Vua redux

vue redux binding higher order component

Version: 0.6.1 Updated: 01/04/2017

By: nadimtuhin License: MIT

Downloads Last 30 Days: 99

Install

npm i vua-redux
yarn add vua-redux

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

CDNs

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

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

unpkg: https://unpkg.com/vua-redux

vue redux binding higher order component

Vua 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 vua-redux --save

Initialize

install in your root component

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

// install vua-redux
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 'vua-redux';

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
Tags: vueredux