npm install vuex-redux
- 目录结构(使用
modules来拆分各个reducer，参照vuex module- 不需要手动编写
action- 提供
namespace，参照vuex namespace- 内置
immer，既能享受便捷的mutable方式去操作state，又能享受immutable带来的状态可预测和方便做性能优化的优点
- modules
- todo.js
- counter.js
- index.js
modules / counter.js
import { createModel } from "vuex-redux";
const model = {
namespace: 'counter',
state: {
count: 10
},
reducer: {
add(state, action) {
state.count += 1
},
minus(state, action) {
state.count--
},
}
}
export default createModel(model)modules / todo.js
import { createModel } from "vuex-redux";
const model = {
namespace: 'todo',
state: {
todoList: []
},
reducer: {
addTodo(state, action) {
state.todoList.push(action.data)
},
delete(state, action) {
state.todoList.splice(action.data, 1)
},
},
}
export default createModel(model)index.js
import { createStore, combineReducers, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import { setActionToStore, storeEnhancer } from "vuex-redux";
import todo from "./modules/todo";
import counter from "./modules/counter";
const loggerMiddleware = store => dispatch => action => {
console.log("action", action)
dispatch(action)
}
const reducerModules = {
todo,
counter,
}
const store = createStore(combineReducers(reducerModules), composeWithDevTools(
applyMiddleware(loggerMiddleware),
storeEnhancer
// other store enhancers if any
));
setActionToStore(store, reducerModules)
export default store组件这样使用
// dispatch 支持两种使用方式
// 原生redux调用： dispatch({type:'add',payload:{}})
// 类似vuex调用： dispatch('add',payload)
// 调用 counter 的 add
dispatch(store.counter.add)//类似 vuex调用
dispatch({ //原生redux调用
type:store.counter.add,
})
// 调用 todo 的 delete
dispatch(store.counter.add,{})//类似 vuex调用
dispatch({//原生redux调用
type:store.counter.delete,
payload:{}
})目录结构
- action.js
- reducer
- todo.js
- counter.js
- index.js
- CounterComponent.js
action.js
export const ADD = 'add'
export const MINUS = 'minus'
export const ADD_TODO = 'addTodo'reducer / todo.js
import { ADD_TODO } from './action.js'
export function todoReducer(state = { todoList:[] }, action) {
switch (action.type) {
case ADD_TODO:
return {
...state,
todoList:[...state.todoList,action.payload]
}
default:
return state
}
}reducer / counter.js
import { ADD, MINUS } from './action.js'
export function counterReducer(state = { count:0 }, action) {
switch (action.type) {
case ADD:
return {
...state,
count:state.count + 1
}
case MINUS:
return {
...state,
count:state.count - 1
}
default:
return state
}
}index.js
import { createStore, combineReducers, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import todo from "./reducer/todo.js";
import counter from "./reducer/counter.js";
const reducerModules = {
todo,
counter,
}
const loggerMiddleware = store => dispatch => action => {
console.log('loggerMiddleware')
dispatch(action)
}
const store = createStore(combineReducers(reducerModules), composeWithDevTools( // use redux-devtools
applyMiddleware(loggerMiddleware),
// other store enhancers if any
));
export default store