Vue redux binding like react-redux.

Overview

Originated from Nadim Tuhin's https://github.com/nadimtuhin/redux-vue

#TODO

  • Need to have an exact copy of the parent component during extend

vue redux binding higher order component

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

Install

install through npm i redux-vue-connect --save

Initialize

install in your root component

// 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)
You might also like...
πŸ– A concise & flexible state model for Redux/MobX/Vuex, etc.

USM USM is a universal state modular library, supports Redux(4.x), MobX(6.x), Vuex(4.x) and Angular(2.0+). Support Libraries/Frameworks None Redux Mob

Redux bindings for VueJS inspired by Vuex.

redux-vuex Redux bindings for VueJS inspired by Vuex. πŸ‘‰ For the old Vue 2 version check out the legacy branch πŸ‘ˆ First things first Why don't you use

Lightweight Redux Store based on RxJS
Lightweight Redux Store based on RxJS

MiniRx Store 5 (alpha) MiniRx Store 5 (alpha) has been released (2023-01-23)! What's new? Component Store: Manage state independently of the global st

A tiny (198 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores
A tiny (198 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores

A tiny (198 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores

A state management library for react inspired by vue 3.0 reactivity api and immer

Welcome to costate πŸ‘‹ A state management library for react inspired by vue 3.0 reactivity api and immer costate is a tiny package that allows you to w

A plugin can redo, undo deep nested JSON. Vue and React friendly.

json-history A plugin can redo, undo deep nested JSON. Vue or React friendly. Support Date as value but regex and function min+gzipped 12.2kB uses goo

State Management made eXtraordinarily simple and effective for Angular, React, and Vue
State Management made eXtraordinarily simple and effective for Angular, React, and Vue

XSM - State Management made eXtraordinarily simple and effective for Angular, React, Vue, and Svelte. 🏠 Homepage Demos Angular React Svelte Vue Realw

Lightweight vuex inspired centralized state management library for all kinds of javascript applications. Great for React Native.

Verx Lightweight vuex inspired centralized state management library for all kinds of javascript applications. install npm install --save verx # yarn a

A state management library for React combined immutable, mutable and reactive mode

Welcome to bistate πŸ‘‹ Create the next immutable state tree by simply modifying the current tree bistate is a tiny package that allows you to work with

Releases(1.0.0)
Owner
Sazzad Hossain (Tushar) Khan
Solutions Architect, Full-Stack, Backend, Frontend, Mobile, Software Engineer, System Administrator, DevOps
Sazzad Hossain (Tushar) Khan
Binding Solutions for Vue & Redux

vuedeux Full Documentation https://vueduex.gitbooks.io/vuedeux-documentation/content/ Synopsis Vuedeux is a lightweight open-source utility layer for

null 70 Aug 28, 2022
Flexible binding between Vue and Redux

vuejs-redux Description Flexible binding between Vue and Redux, allowing use of multiple stores. It works, in the same way, like render props does in

Titouan CREACH 58 Nov 24, 2022
Library for connecting MobX to native Web Components with a Vue-like template binding syntax

ElemX.js ElemX is a proof-of-concept front-end javascript library for connecting MobX to native Web Components with a Vue-like template binding syntax

Alan Graham 15 Nov 28, 2022
Enable two-way data binding for form fields saved in a Vuex store

vuex-map-fields Enable two-way data binding for form fields saved in a Vuex store. Install npm install --save vuex-map-fields Basic example The follow

Markus Oberlehner 1.4k Dec 2, 2022
Vuex binding for client-side search with indexers and Web Workers :green_book::mag:

Vuex Search is a plugin for searching collections of objects. Search algorithms powered by js-worker-search. See working example here. Installation: n

Albert Lucianto 160 Dec 24, 2022
:smile: :star: :innocent: Mobx binding for Vuejs 2.

vue-mobx Mobx binding for Vue. Only supports Vuejs 2.x & Mobx 2.2.x or higher. Installation Install the pkg with npm: npm install vue-mobx --save or

Pomy 110 Nov 21, 2022
A tiny Vue plugin that connects Vue Router with Redux

redux-first-vue-routing A tiny Vue plugin that connects Vue Router with Redux, an implementation of redux-first-routing. New to Redux? Start Here Achi

Kai Johnson 4 Apr 27, 2022
A tiny Vue plugin that connects components with Redux

redux-connect-vue **Note: redux-connect-vue v3 is compatible with Vue 3.x. If you are looking for a Vue 2.x compatible version, check out v2 A tiny Vu

Kai Johnson 3 May 23, 2022
Redux hooks for Vue

vue-redux-hooks Install npm i redux vue-redux-hooks yarn add redux vue-redux-hooks API ReduxStore // store.ts import { createStore, AnyAction } from '

Patryk WaΕ‚ach 7 Jan 25, 2023
Vuex plugin for redux-saga

vuex-coolstory Use redux-saga with Vuex. Overview redux-saga is an awesome library that aims to make side effects (i.e. asynchronous things like data

Nikita Lvov 23 Apr 2, 2022