Skip to content

Needs methods as well #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open
13 changes: 9 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,25 @@
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 --save``
install through ``npm i redux-vue-connect --save``

## Initialize
install in your root component

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

// install redux-vue
// install redux-vue-connect
Vue.use(reduxStorePlugin);

new Vue({
Expand Down Expand Up @@ -55,7 +60,7 @@ export default AppStore;
```js
// components/App.js

import { connect } from 'redux-vue';
import { connect } from 'redux-vue-connect';

const App = {
props: {
Expand Down
14 changes: 8 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"name": "redux-vue",
"version": "0.7.1",
"name": "redux-vue-connect",
"version": "1.0.0",
"description": "Vue Redux binding higher order component",
"author": "Nadim Tuhin",
"author": "Sazzad Hossain Khan",
"contributor": "Sazzad Hossain Khan",
"repository": {
"type": "git",
"url": "https://github.com/nadimtuhin/redux-vue.git"
"url": "https://github.com/itsazzad/redux-vue-connect.git"
},
"bugs": "https://github.com/nadimtuhin/redux-vue/issues",
"homepage": "http://nadimtuhin.com",
"bugs": "https://github.com/itsazzad/redux-vue-connect/issues",
"homepage": "https://github.com/itsazzad",
"license": "MIT",
"main": "lib/index.js",
"scripts": {
Expand All @@ -22,6 +23,7 @@
"redux",
"vue-redux",
"redux-vue",
"redux-vue-connect",
"flux",
"immutable"
],
Expand Down
22 changes: 12 additions & 10 deletions src/connect.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ function getActions(component, mapActionsToProps) {
function getProps(component) {
let props = {};
const attrs = getAttrs(component);
const stateNames = component.vuaReduxStateNames;
const actionNames = component.vuaReduxActionNames;
const stateNames = component.vueReduxStateNames;
const actionNames = component.vueReduxActionNames;

for (let ii = 0; ii < stateNames.length; ii++) {
props[stateNames[ii]] = component[stateNames[ii]];
Expand Down Expand Up @@ -68,14 +68,14 @@ export default function connect(mapStateToProps, mapActionsToProps) {
...normalizeProps(children.collect || {})
};

const msg = `vua-redux: collect is deprecated, use props ` +
const msg = `redux-vue-connect: collect is deprecated, use props ` +
`in ${children.name || 'anonymous'} component`;

console.warn(msg);
}

return {
name: `ConnectVuaRedux-${children.name || 'children'}`,
name: `ReduxVueConnect-${children.name || 'children'}`,

render(h) {
const props = getProps(this);
Expand All @@ -92,18 +92,18 @@ export default function connect(mapStateToProps, mapActionsToProps) {
return {
...state,
...actions,
vuaReduxStateNames: stateNames,
vuaReduxActionNames: actionNames
vueReduxStateNames: stateNames,
vueReduxActionNames: actionNames
};
},

created() {
const store = getStore(this);

this.vuaReduxUnsubscribe = store.subscribe(() => {
this.vueReduxUnsubscribe = store.subscribe(() => {
const state = getStates(this, mapStateToProps);
const stateNames = Object.keys(state);
this.vuaReduxStateNames = stateNames;
this.vueReduxStateNames = stateNames;

for (let ii = 0; ii < stateNames.length; ii++) {
this[stateNames[ii]] = state[stateNames[ii]];
Expand All @@ -112,8 +112,10 @@ export default function connect(mapStateToProps, mapActionsToProps) {
},

beforeDestroy() {
this.vuaReduxUnsubscribe();
}
this.vueReduxUnsubscribe();
},

methods: children.methods
};
};
}
Loading