redux-happy

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)

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)

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:{}
})

export const ADD = 'add'
export const MINUS = 'minus'
export const ADD_TODO = 'addTodo'

import { ADD_TODO } from './action.js'
 
export function todoReducer(state = { todoList:[] }, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todoList:state.todoList.push(action.payload)
      }
    default:
      return state
  }
}

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
  }
}

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