# Getting started with Redux 0x103: splitting multiple reducers

Time：2020-10-27

### 0x001 overview

This chapter talks about more than one`reducer`How to deal with it and`ledux`Support more than one`reducer`

### 0x002 unsealing`reducer`

``````import {createStore, combineReducers} from 'redux'

const ACTION_NUM1_INCREMENT = 'ACTION_NUM1_INCREMENT'
const ACTION_NUM2_INCREMENT = 'ACTION_NUM2_INCREMENT'

const num1 = (state = 0, action) => {
switch (action.type) {
case ACTION_NUM1_INCREMENT: {
return ++state
}
default: {
return state
}
}
}

const num2 = (state = 0, action) => {
switch ((action.type)) {
case ACTION_NUM2_INCREMENT: {
return ++state
}
default: {
return state
}
}
}

const reducer = combineReducers({
num1: num1,
num2: num2
})
let store = createStore(reducer)

store.subscribe(() => {
console.log(store.getState())
})

store.dispatch({type: ACTION_NUM1_INCREMENT})
store.dispatch({type: ACTION_NUM2_INCREMENT})``````

View browser

It’s so simple. The core function is:`combineReducers(reducers)`, set multiple`reducer`And form one. After splitting, what about each`reducer`Manage one separately`state`

### 0x002 reconstruction`ledux`Make it supportive`combineReducers`

• add to`combineReducers`And modify it`state`Computational logic
``````class Ledux {
static createStore(reduer) {
return new Store(reduer)
}

static combineReducers(reducers) {
return reducers
}
}

class Store {
constructor(reducer) {
this.state = this.calculateState(reducer)
this.callbacks = []
this.reducer = reducer
}

subscribe(callback) {
this.callbacks.push(callback)
}

getState() {
return this.state
}

dispatch(action) {
this.state = this.calculateState(this.reducer, action)
this.callbacks.forEach(callback => callback())
}

/**
*A reducer may be an object that passes through combinereducers
*Therefore, it is necessary to determine whether the reducer is an object
*If so
*That means it's a composite reducer
*Each state needs to be computed in a loop
*And save it to state as an object
*If it's not an object and it's a function
*That shows that this is a single reducer
*Just calculate it directly
*Then save it to state
*
*@ param reducer single reducer function or object after combinereducers
* @param action
* @returns {*}
*/
calculateState(reducer, action = {}) {
if (typeof reducer === 'object') {
return Object.keys(reducer).map((key) => {
return {
[key]: reducer[key](undefined, action)
}
}).reduce((pre, current) => {
return {...pre, ...current}
})
} else if (typeof reducer === 'function') {
return reducer(undefined, action)
}
}
}
/**
*Keep the API consistent with Redux
*In this way, the function called is not modified
*/
const createStore = Ledux.createStore
const combineReducers = Ledux.combineReducers
export {createStore, combineReducers}
export default Ledux``````
• Modify call
``````//Just modify the introduction of Redux directly
import {createStore, combineReducers} from './ledux'``````

nothing

• Source code

## MVC and Vue

MVC and Vue This article was written on July 27, 2020 The first question is: is Vue an MVC or an MVVM framework? Wikipedia tells us: MVVM is a variant of PM, and PM is a variant of MVC. So to a certain extent, whether Vue is MVC or MVVM or not, its ideological direction […]