Migrating between Redux and Vuex (Part 2)

Welcome back! This is the second part in n (still not decided) part series trying to help developers with knowledge of either
Redux or
Vuex understand the other one. If you want to read about reducers, mutations, actions and async action, you can read them here in part- Ⅰ.

OK, so with the customary disclaimer for multi-part series out of the way, let’s dig into our main topic.

Passing the store

Now that we’ve created our store, we need to make sure that our components can use it. We can either pass the store object to each component (too tedious 😩) or we can pass the store to the root element such that it becomes available to all the components.

In React, we create a new parent to our root component, Providercomponent from
react-redux and pass the store as an attribute to it.

1

2

3

4

5

6

7

8

import{Provider}from'react-redux'

render(

<Provider store={store}>

<App/>

</Provider>,

document.getElementById('root')

)

In Vue too it’s done while initializing our root element by passing the store as a part of object being passed to the Vue constructor.

1

2

3

4

5

6

7

import Vue from'vue';

import App from'./App.vue';

newVue({

store,

render:h=>h(App)

}).$mount('#app')

Now that store has become available in our components, next we’ll see how to read/write to them from components.

Using in components

React

To connect your component to the store you can either use store.subscribe() in your container component, or use the connect API. We are going to use the connect API as it has lot of performance optimization.

Let’s take a simple component
Counter.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

classCounterextendsComponent{

render(){

const{value,onIncrement,onDecrement}=this.props

return(

<p>

Clicked:{value}times

{' '}

<button onClick={onIncrement()}>+</button>

{' '}

<button onClick={onDecrement()}>-</button>

</p>

)

}

}

export defaultCounter

This is a simple React component and has nothing to do with
Redux. Now let’s write a container, which will connect to the store.

To use the connectfunction we need to define a function that tells how to map store’s state to components properties.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

import Counter from'../components/Counter'

constmapStateToProps=(state)=>({

value:state.value

})

constmapDispatchToProps=(dispatch)=>({

onIncrement:()=>dispatch({type:'increment'}),

onDecrement:()=>dispatch({type:'decrement'})

})

constCounterLink=connect(

mapStateToProps,

mapDispatchToProps

)(Counter)

export defaultCounterLink

mapStateToProps, defines mapping between state and component’s properties and similarly mapDispatchToPropsdefines the mapping between store’s and component’s action handlers.

These gettersare available in component via store.gettersobjects. You don’t need to worry about performance of these getters as Vuex implements memoization for them (will try and cover this in some future blog, but not as a part of this series).

I hope that by now you guys have got basic (and some advance) understanding of both Redux and Vuex and will find migrating between them easier than you would in the past. I still have few more topics to cover and will continue with them in the next article.