Compare Vuex with Redux

compare-redux-vuex.md

Compare Vuex with Redux

• Compare Vuex with Redux
• Vuex
  • Vuex Concepts
    • 1. store
    • 2. action
    • 3. mutation
  • Backend
    • 1. model
    • 2. service
    • 3. repository
  • Vuex Structure and Configuration
• Redux
  • Redux Concepts
    • 1. Action Types
    • 2. Action Creators
    • 3. Reducer
  • Syntax and Examples
  • Redux Boilerplate
  • Redux Critics
    • Critics: Type list
    • Critics: Reducer
    • Critics: MapState, Compose, Connect
    • Critics: Props

Vuex

Vuex Concepts

1. store

• state data model (objects)

2. action

• async dispatch to service
• commit data to mutation

3. mutation

• update state (store)

Backend

1. model

• service data model (plain objects)
• used by service and repository

2. service

• called by action
• uses model objects
• applys busines logic to objects
• persists data changes with repository
• feedback to action

3. repository

• service data model (objects)
• maps data model to outer serivice (database, rest)

Vuex Structure and Configuration

• Docs of Vuex Modules

Redux

Redux Concepts

1. Action Types

• string per type
• enumeration of strings

2. Action Creators

• function with action name
• Vuex mutations are like action creator + dispcatcher
• action is like an API: accepts data according to specification and dispatchs

3. Reducer

• get called by dispatcher
• never change status but create an new data structure and replaces the old one

Syntax and Examples

change state: commit to mutation (if actions needed)

this.$store.commit('updateMessage', e.target.value)

Redux Boilerplate

• https://github.com/KaiHotz/React-Redux-Simple-Starter
• /actions/types.js
• /actions/index.js
  • action function called by component
  • is doing the logic, data modification and persistence (if not deligated)
  • calling reducer
• /reducers/index.js
  • is changing the state by replacing the old state by a new one

Redux Critics

Critics: Type list

export const 'ITEM_GET'
export const 'ITEM_GET_ONE'

• There is no usecase where I want to see all action types
  • structure types as you would with objects and modules
  • rather know which actions I have and need in my domain/ applyable to my objects

Critics: Reducer

export default function (state = {}, action) {
  switch (action.type) {
    case ITEM_GET:
      return _.mapKeys(action.payload.data, 'id')
    case ITEM_GET_ONE:
      return { ...state, ...action.payload.data }
    default:
      return state
  }
}

• why this complicated action type matching in the reducer
  • rather call the functions by name (like Vuex does with it's mutations)

Critics: MapState, Compose, Connect

const mapStateToProps = ({ posts }) => ({ posts })
export default compose(connect(mapStateToProps, { requestOne }))(ExampleContainer)

• the mapStateToProps, compose and connect functions are
  • de-focussing the developer from the problem domain
  • compose and connect are too similar in meaning and order can be confused
  • error prone: easy to forget to mention one of the actions
  • error prone: easy to forget the curley brackets)

import { compose } from 'recompose'
import { connect } from 'react-redux'
import { requestOne } from '../actions'

• Too many imports, at least 3 for a simple action

Critics: Props

  static propTypes = {
    posts: PropTypes.object,
    requestOne: PropTypes.func.isRequired
  }

  static defaultProps = {
    posts: {}
  }

• unclear that props are connected to propTypes and defaultProps are. Usually you check function properties in the signature (e.g. typescript)
• Configuring props by putting the props as keys into an object is counter intuitiv.
• why is not all props configuration in one place? Why is there a second object for the default?