Comparing Vuex and Redux by developing an application

Preetish HS
Feb 17, 2019 · 7 min read
Image for post
Image for post

I have been using Vue and React for quite some time now.

So here is an article about comparing how Vuex and Redux do the same things in different ways.

Image for post
Image for post

The HTML

Getting Started

Vuex

Redux

Store and State

How Vuex does it

Redux uses Reducers to create and manage a set of states.

Using these states in our application

How Vuex does it

<li v-for="(item, index) in todoList" 
:key="item.id"
:class="{ completed: item.completed}"
>

How Redux does it

//component
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return { todos: state };
}
export default connect(mapStateToProps)(App);
renderList() {
return this.props.todos.map(item => {
return (
<li key={item.id}
className={"todo " + (item.completed ? "completed" : "")}
onClick={() => this.props.toggleCompletion(item.id)}>
</li>
)
})
}

Modifying the State

How Vuex does it


//store.js
mutations
: {
addItem(state, payload) {
state.todos.push({id:GLOBAL_ID++, title: payload, completed: false});
},
togglecompletion(state, id) {
state.todos.forEach( item => {
if(item.id === id)
item.completed = !item.completed;
})
},
removeItem(state, index) {
state.todos.splice(index, 1);
}
}

How Redux does it

//reducer/index.jsconst todos = (state = initialState, action) => {
switch (action.type) {
case "ADD_ITEM":
return [
...state,
{
id: GLOBAL_ID++,
title: action.title,
completed: false
}
];
case "TOGGLE_COMPLETION":
console.log('action', action);
return state.map(todo =>
todo.id === action.id ? { ...todo, completed: !todo.completed } : todo
);
case "REMOVE_ITEM":
return state.filter(todo => todo.id !== action.id);
default:
return state;
}
};
//actions/index.jslet nextTodoId = 0;export const addItem = title => {
return {
type: "ADD_ITEM",
id: nextTodoId++,
title
};
};
export const toggleCompletion = id => {
return {
type: "TOGGLE_COMPLETION",
id
};
};
export const removeItem = id => {
return {
type: "REMOVE_ITEM",
id
}
};

Modifying the State from our Components

How Vuex does it

methods: {
...mapMutations([
'addItem',
'togglecompletion',
'removeItem',
])
}
<button class="destroy" @click.stop="removeTodo(index)"></button>removeTodo: function(index) {
this.removeItem(index);
}

How Redux does it

const mapDispatcherstoProps = dispatch =>  {
return {
toggleCompletion: (id) => dispatch(toggleCompletion(id)),
removeItem: (id) => dispatch(removeItem(id)),
addItem: (title)=> dispatch(addItem(title)),
addItemFromWeb: ()=> dispatch(addItemFromWeb())
}
}
export default connect(mapStateToProps, mapDispatcherstoProps)(App);
<button className="destroy" 
onClick={() => this.props.removeItem(item.id)}
/>

Making Async Calls

How Vuex does it

//store.js
actions: {
addItemFromWeb(context) {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then((response) => {
console.log(response);
context.commit('addItem', response.data.title)
})
.catch((error) => console.log(error));
}
}
<button @click="addItemFromWeb"> Async Add </button>methods: {
...mapActions([
'addItemFromWeb'
])
}

How Redux does it

import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(
reducer,
applyMiddleware(thunk),
);
export const addItemFromWeb = () => {
return dispatch => {
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then((response) =>{
console.log(response);
dispatch(addItem(response.data.title));
})
.catch((error) => {
console.log(error);
})
}
}

Application Management and Scaling

How Vuex does it

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}

const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})

store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state

How Redux does it

import { combineReducers } from 'redux' 
import todos from './todos'
import counter from './counter'

let reducers = combineReducers({
todo: todos,
ctr: counter
})
const store = createStore(reducer);ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

Conclusion

Live Demo

Demo App source code

I am also currently available for freelance web developer work. Have any projects for me? Be sure to drop me an email at contact@preetish.in 😃

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store