VUEX与React-Redux：一个是针对VUE优化的状态管理系统，一个仅是常规的状态管理系统（Redux）
vuex
index.js
import Vue from ‘vue’
import Vuex from ‘vuex’
import as actions from ‘./actions’
import as getters from ‘./getters’
import state from ‘./state’
import mutations from ‘./mutations’
import createLogger from ‘vuex/dist/logger’
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== ‘production’
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
actions
getters
export const language = state => state.language
export const client = state => state.client
export const routerTo = state => state.routerTo
mutation-types
export const LANGUAGE = ‘LANGUAGE’
export const CLIENT = ‘CLIENT’
export const ROUTERTO = ‘ROUTERTO’
mutations
import * as types from ‘./mutation-types’
const mutations = {
types.LANGUAGE {
state.language = language
},
types.CLIENT {
state.client = client
},
types.ROUTERTO {
state.routerTo = routerTo
}
}
export default mutations
state
const state = {
language: ‘chinese’,
client: ‘pc’,
routerTo: ‘home’
}
export default state
import {mapGetters} from ‘vuex’
computed: {
…mapGetters([
‘language’
])
},
redux
store(index.js)
import { createStore, applyMiddleware, compose } from ‘redux’
import thunk from ‘redux-thunk’
import reducer from ‘./reducer’
const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;
const store = createStore(reducer, / preloadedState, / composeEnhancers(
applyMiddleware(thunk)
));
export default store
(store)reducer.js
import { combineReducers } from ‘redux-immutable’
import { reducer as headerReducer } from ‘../common/header/store’
import { reducer as homeReducer } from ‘../pages/home/store’
import { reducer as detailReducer } from ‘../pages/detail/store’
import { reducer as loginReducer } from ‘../pages/login/store’
const reducer = combineReducers({
header: headerReducer,
home: homeReducer,
detail: detailReducer,
login: loginReducer
})
export default reducer
(header/store) index.js
import reducer from ‘./reducer’
import as actionCreators from ‘./actionCreators’
import as actionTypes from ‘./actionTypes’
export { reducer, actionCreators, actionTypes }
(header/store) reducer.js
import * as actionTypes from ‘./actionTypes’
import { fromJS } from ‘immutable’
const defaultState = fromJS({
focused: false,
mouseIn: false,
list: [],
page: 1,
totalPage:1
})
export default (state = defaultState, action) => {
switch (action.type) {
case actionTypes.SEARCH_FOCUS :
return state.set(‘focused’, true)
case actionTypes.SEARCH_BLUR:
return state.set(‘focused’, false)
case actionTypes.CHANGE_LIST:
return state.merge({
list: action.data,
totalPage: action.totalPage
})
case actionTypes.MOUSE_ENTER:
return state.set(‘mouseIn’, true)
case actionTypes.MOUSE_LEAVE:
return state.set(‘mouseIn’, false)
case actionTypes.CHANGE_PAGE:
return state.set(‘page’, action.nextPage)
default:
return state
}
}
actionTypes.js
export const SEARCH_FOCUS = ‘header/SEARCH_FOCUS’
export const SEARCH_BLUR = ‘header/SEARCH_BLUR’
export const CHANGE_LIST = ‘header/CHANGE_LIST’
export const MOUSE_ENTER = ‘header/MOUSE_ENTER’
export const MOUSE_LEAVE = ‘header/MOUSE_LEAVE’
export const CHANGE_PAGE = ‘header/CHANGE_PAGE’
actionCreators.js
import * as actionTypes from ‘./actionTypes’
import axios from ‘axios’
import { fromJS } from ‘immutable’
export const searchFocus = () => ({
type: actionTypes.SEARCH_FOCUS
})
export const searchBlur = () => ({
type: actionTypes.SEARCH_BLUR
})
const changeList = (data) => ({
type: actionTypes.CHANGE_LIST,
data: fromJS(data) , // 数据类型 保持一致 都为immutable数组
totalPage: Math.ceil(data.length / 10)
})
export const getList = () => {
return (dispatch) => {
axios.get(‘/api/headerList.json’).then((res) => {
if (res.data.success) {
dispatch(changeList(res.data.data))
}
}).catch( (e) => {
console.log(e)
})
}
}
export const mouseEnter = () => ({
type: actionTypes.MOUSE_ENTER
})
export const mouseLeave = () => ({
type: actionTypes.MOUSE_LEAVE
})
export const changePage = (nextPage) => ({
type: actionTypes.CHANGE_PAGE,
nextPage
})
header index.js
import { connect } from ‘react-redux’;
import { actionCreators } from ‘./store’;
import { actionCreators as loginActionCreators } from ‘../../pages/login/store’
const mapStateToProps = (state) => ({
focused: state.getIn([‘header’, ‘focused’]),
// state.get(‘header’).get(‘focused’)
list: state.getIn([‘header’, ‘list’]),
page: state.getIn([‘header’, ‘page’]),
totalPage: state.getIn([‘header’, ‘totalPage’]),
mouseIn: state.getIn([‘header’, ‘mouseIn’]),
login: state.getIn([‘login’, ‘login’])
})
const mapDispatchToProps = (dispatch) => {
return {
handleInputFocus (list) {
(!list.length) && dispatch(actionCreators.getList())
dispatch(actionCreators.searchFocus())
},
handleInputBlur () {
dispatch(actionCreators.searchBlur())
},
handleMouseIn () {
dispatch(actionCreators.mouseEnter())
},
handleMouseLeave () {
dispatch(actionCreators.mouseLeave())
},
handleChangePage (page, totalPage) {
let nextPage
if (page < totalPage) {
nextPage = page + 1
} else {
nextPage = 1
}
dispatch(actionCreators.changePage(nextPage))
},
logout() {
dispatch(loginActionCreators.logout())
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)
const { focused, handleInputFocus, handleInputBlur, list, login, logout } = this.props
