# Vuex与Redux比较

由于Vuex和Redux都是从Flux中衍生出来，同时Vuex对Redux部分思想也有一些借鉴，所以Vuex和Redux有很多相同点。很多资料也有介绍两者的对比，但大部分讲解的比较抽象，较难理解。笔者整理两者异同点，同时配有标准案例进行说明。注意本文不是科普vuex和redux相关概念，相关知识内容可以在官方文档中查看。Vuex (opens new window) 、Redux (opens new window)

# 异同点

# 相同点
- state 共享数据
- 流程一致：定义全局state，触发，修改state
- 原理相似，通过全局注入store。
# 不同点
- 从实现原理上来说：
  - Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
  - Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
- 从表现层来说：
  - vuex定义了state、getter、mutation、action四个对象；redux定义了state、reducer、action。
    - vuex中state统一存放，方便理解；reduxstate依赖所有reducer的初始值
    - vuex有getter,目的是快捷得到state；redux没有这层，react-redux mapStateToProps参数做了这个工作。
    - vuex中mutation只是单纯赋值(很浅的一层)；redux中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写方式不同
    - vuex中action有较为复杂的异步ajax请求；redux中action中可简单可复杂,简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。
  - vuex触发方式有两种commit同步和dispatch异步；redux同步和异步都使用dispatch

# 详细解释

# Vuex
- 类型
  - state: 共享数据
  - getter: 快捷state
  - mutation: 同步更新，只是简单都赋值
  - action: 异步更新，可以调用commit来触发同步mutation
- 触发
  - commit 触发mutation同步操作
  - dispatch 触发action异步操作
- 库结合（自带）
  - mapState
  - mapGetters
  - mapMutations
  - mapActions
- 其他
  - UI跟state、action/dispatch相关
  - mutations 同步修改state。UI触发使用commit指令
  - action 内可以commit同步state或dispatch异步另外一个action。UI触发使用dispatch指令
# Redux
- 类型
  - store: 合并所有reducer，共享数据
  - reducer: 两个作用：1. 初始值合并获得state 2. 简单的赋值，获取新的state代替老的state
  - action: 触发函数。是唯一可以带上数据修改state的触发对象。接下逻辑就转移到reducer中
  注：也可以反过来理解：Vuex的每一次this.$store.commit('type', data) === action(data){ return { type, data}}）
- 触发 (依赖react-redux)
  - dispatch触发同步或异步。使用mapDispatchToProps参数
- 库结合（依赖react-redux）
  - mapStateToProps
  - mapDispatchToProps

简单理解，reducer承担了state和mutations功能。 Vuex中commit-mutations是唯一修改state的方式；Redux中dispatch-reducer是唯一修改state方式

# Vuex典型案例

// vuex非常简单易懂，而且整理到1个文件即可
const state: IState = {
  login: false,
  option: {
    _id: '',
    sub_title: '',
    title: '',
    keyword: '',
    descript: '',
    url: '',
    email: '',
    icp: ''
  }
}

const actions: ActionTree<IState, any> = {
  // 登录
  async login ({ commit }, user: StoreState.Login): Promise<Ajax.AjaxResponse> {
    commit('USER_LOGINING')
    const res: Ajax.AjaxResponse = await service.login({ ...user })
    commit('USER_LOGINING_FINAL')
    return res
  },
}

const mutations: MutationTree<IState> = {
  'USER_LOGINING' (state: IState): void {
    state.login = true
  },

  'USER_LOGINING_FINAL' (state: IState): void {
    state.login = false
  },
}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  modules
})

# Redux典型案例

// store.js
import { createStore, combineReducers, applyMiddleware } from 'redux'
import home from './home/reducer'
import demo from './demo/reducer'
import thunk from 'redux-thunk'

// reducers获得初始state
let store = createStore(combineReducers({ home, demo }), applyMiddleware(thunk))

export default store

// reducer.js
let defaultState = {
    demoList: []
}

export default (state = defaultState, action) => {
    switch (action.type) {
        case 'setDemoList':
            return { ...state, demoList: action.list }
        default:
            return state
    }
}

// action.js
// 同步action
export const setDemoList = list => ({
    type: 'setDemoList',
    list
})

// 异步action
export const setAsyncList = () => {
    return async dispatch => {
        let result = await API.getXXX()
        dispatch({type: 'setAsyncList', result})
    }
}

// ui
const mapStateToProps = (state) => {
    return {
        list: state.demo.demoList
    }
}

// const mapDispatchToProps = (dispatch) => {
//     return {
//         setDemoList: list => dispatch(setDemoList(list))
//     }
// }
// or
const mapDispatchToProps = {setDemoList}

export default connect(mapStateToProps, mapDispatchToProps)(Demo)

# 总结

vuex的流向：
- view——>commit——>mutations——>state变化——>view变化（同步操作）
- view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）
redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样）

# Vuex与Redux比较

# 异同点

# 相同点

# 不同点

# 详细解释

# Vuex

# Redux

# Vuex典型案例

# Redux典型案例

# 总结

# 参考文章