React和Vue状态管理库（Redux和Vuex）语法比较

Z时代
2024-01-10
分类：技术分享

这是有关React和Vue语法比较的第三篇文章。在本文中，将比较两种生态系统中最著名的状态管理库（Redux和Vuex）的语法。

其它两篇：

React.js和Vue.js的语法并列比较

Next.js和Nuxt.js的语法比较

议程

创建Store

Action

异步Action

Reducer | Mutation

Combine-Reducers | Modules

Connect-with-Component

中间件 | 插件

Selector | Getter

DevTools

创建Store

Redux: https://redux.js.org/basics/s...

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
const store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'))

Vuex: https://vuex.vuejs.org/guide/

const store = new Vuex.Store({
state: { ... },
mutations: { ... }
})
...
new Vue({
el: '#app',
store,});

Action

Redux: https://redux.js.org/basics/a...

const ADD_TODO = 'ADD_TODO'
function addTodo(text) {
return {
type: ADD_TODO,
text,
}}

Vuex: https://vuex.vuejs.org/guide/...

const store = new Vuex.Store({
actions: {
increment (context) {
context.commit('increment') // commit a mutation to trigger state update
}
}})

异步Action

Redux(redux-thunk): https://redux.js.org/advanced...

// apply redux-thunk
import thunkMiddleware from 'redux-thunk'
const store = createStore(
rootReducer,
applyMiddleware(thunkMiddleware)
)
...
export function fetchPosts() {
return function (dispatch) {
dispatch(requestPosts())
return fetch('xxx')
.then(response => response.json())
.then(json => dispatch(receivePosts(json)))
}}

Vuex: https://vuex.vuejs.org/guide/...

actions: {
async fetchPosts ({ commit }) {
commit('requestPosts');
const res = await fetch('xxx');
commit('receivePosts', res);
},}

Reducer | Mutation

Redux(reducer): https://redux.js.org/basics/r...

const initialState = {
todos: [],
}
function todoApp(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return {
...state,
todos: [
...state.todos,
{
text: action.text,
completed: false,
}
],
}
default:
return state
}}

Vuex(mutation): https://vuex.vuejs.org/guide/...

const store = new Vuex.Store({
mutations: {
addTodo (state, payload) {
state.todos = [
...state.todos,
{ text: payload.text, completed: false }
]
}
}})

Combine-Reducers | Modules

Redux(combine-reducers): https://redux.js.org/api/comb...

import { combineReducers } from 'redux'
const reducers = combineReducers({
reducerA,
reducerB,
})export default reducers

Vuex(modules): https://vuex.vuejs.org/guide/...

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

Connect-with-Component

Redux: https://redux.js.org/basics/u...

import { connect } from 'react-redux'
import { addTodo } from '../actions'
import TargetComp from '../components/TargetComp'
// state
const mapStateToProps = (state, ownProps) => {
return {
todos: state.todos,
}
}
// action
const mapDispatchToProps = (dispatch, ownProps) => {
return {
addTodo: (text) => {
dispatch(addTodo(text))
}
}
}
const TargetContainer = connect(mapStateToProps, mapDispatchToProps)(TargetComp)export default TargetContainer

Vuex

state: https://vuex.vuejs.org/guide/...

import { mapState } from 'vuex'
export default {
computed: {
...mapState(['count']),
}}

action: https://vuex.vuejs.org/guide/...

import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['increment']),
}}

中间件 | 插件

Redux(middleware): https://redux.js.org/advanced...

import { createStore, combineReducers, applyMiddleware } from 'redux'
const logger = store => next => action => {
console.log('dispatching', action)
let result = next(action)
console.log('next state', store.getState())
return result
}
const todoApp = combineReducers(reducers)
const store = createStore(
todoApp,
applyMiddleware(logger))

Vuex(plugin): https://vuex.vuejs.org/guide/...

const myPluginWithSnapshot = store => {
let prevState = _.cloneDeep(store.state)
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)
// compare `prevState` and `nextState`...
// save state for next mutation
prevState = nextState
})
}
const store = new Vuex.Store({
...,
plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : [],})

Selector | Getter

Redux(reselect): https://redux.js.org/recipes/...

import { createSelector } from 'reselect'
const getTodos = state => state.todos
export const getDoneTodos = createSelector(
[getTodos],
todos.filter(t => t.completed),
)
...
import { connect } from 'react-redux'
import TodoList from '../components/TodoList'
import { getDoneTodos } from '../selectors'
const mapStateToProps = state => {
return {
doneTodos: getDoneTodos(state)
}
}
const DoneTodoList = connect(mapStateToProps)(TodoList)export default DoneTodoList

Vuex: https://vuex.vuejs.org/guide/...

const store = new Vuex.Store({
state: { ... },
getters: {
doneTodos: state => {
return state.todos.filter(t => t.completed)
}
}
})
...
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['doneTodos'])
}}