Vue.js VueJS + Redux with Vua-Redux (Best Solution) How to use Vua-Redux
Example
Installing Vua Redux from NPM:
Install through:
npm i vua-redux --save
Initialize:
===============
// 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 />
}
});
// AppStore.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: ['some-prop', 'another-prop'],
/**
* everything you do with vue component props
* you can do inside collect key
*/
collect: {
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 mapStateAsProps(state) {
return {
todos: state.todos
};
}
function mapActionsAsProps(dispatch) {
return {
addTodo(todo) {
dispatch({
type: 'ADD_TODO',
data: { todo }
})
}
}
}
export default connect(mapStateAsProps, mapActionsAsProps)(App);
