vue redux binding higher order component

Install

Initialize

// main.js
import Vue from 'vue';
import { reduxStorePlugin } from 'redux-vue-connect';
import AppStore from './AppStore';
import App from './Component/App';
// install redux-vue-connect
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-connect';
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);

If you prefer to use single-file components

// components/Comp.js
<template>
 <div>
 Hello world!
 </div>
</template>
<script>
export default {
 name: 'my-comp',
}
</script>
<style >
</style>

// components/App.js
import { connect } from 'redux-vue'
import Comp from './Comp'
const mapStateToProps = (state) => ({})
const mapDispatchToProps = (dispatch) => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Comp)