插件系统

rematch实现了一个插件系统，内置了dispatch和effects两个插件，分别用来增强dispatch和处理异步操作。rematch的插件，要符合rematch的要求，每个插件返回一个对象，这个对象可以包含几个属性，用来在不同的生命周期中对store进行操作。

对于每一个插件对象，提供了如下几个属性进行配置。

• onInit：进行插件的初始化工作
• config: 对rematch进行配置，会在rematch初始化之前，对插件的config配置进行merge操作
• exposed：暴露给全局的属性和方法，可以理解为占位符，用于数据的共享
• middleware：相当于redux的中间键，如果提供了这个属性，会把它交给redux进行处理
• onModel：加载model的时候会调用的方法，用来对model进行处理
• onStoreCreated：当rematch的store对象生成后，调用的方法，生成最终的store对象

DispatchPlugin

plugin包含exposed、onStoreCreated和onModel三个属性

const dispatchPlugin: R.Plugin = {exposed: {storeDispatch(action: R.Action, state: any) {console.warn('Warning: store not yet loaded')},storeGetState() {console.warn('Warning: store not yet loaded')},dispatch(action: R.Action) {return this.storeDispatch(action)},createDispatcher(modelName: string, reducerName: string) {return async (payload?: any, meta?: any): Promise<any> => {const action: R.Action = { type: `${modelName}/${reducerName}` }if (typeof payload !== 'undefined') {action.payload = payload}if (typeof meta !== 'undefined') {action.meta = meta}return this.dispatch(action)}},},// 在store创建完成的时候调用，将增强后的dispatch方法抛出onStoreCreated(store: any) {this.storeDispatch = store.dispatchthis.storeGetState = store.getStatereturn { dispatch: this.dispatch }},// 对model上的每个reducer创建action createor，并挂载到dispatch对象上onModel(model: R.Model) {this.dispatch[model.name] = {}if (!model.reducers) {return}for (const reducerName of Object.keys(model.reducers)) {this.validate([[!!reducerName.match(/\/.+\//),`Invalid reducer name (${model.name}/${reducerName})`,],[typeof model.reducers[reducerName] !== 'function',`Invalid reducer (${model.name}/${reducerName}). Must be a function`,],])this.dispatch[model.name][reducerName] = this.createDispatcher.apply(this,[model.name, reducerName])}},
}
复制代码

这个插件用来处理model的reducers属性，如果model没有reducers，就直接退出；否则，遍历reducers，如果键名包含是/符号开头结尾的或者值不是一个函数，就报错退出。

通过createDispatcher函数，对每个reducer进行处理，包装成一个异步的action creator，action的type由model.name和reducerName组成。

onStoreCreated属性，会返回增强后的dispatch方法去重置redux默认的dispatch方法。

EffectsPlugin

effects plugin包含exposed、onModel和middleware三个属性。

const effectsPlugin: R.Plugin = {exposed: {effects: {},},// 将每个model上的effects添加到dispatch上，这样可以通过dispatch[modelName][effectName]来调用effect方法onModel(model: R.Model): void {if (!model.effects) {return}// model的effects可以是一个对象，或者是一个返回对象的函数，这个函数的参数是全局的dispatch方法const effects =typeof model.effects === 'function'? model.effects(this.dispatch): model.effectsfor (const effectName of Object.keys(effects)) {this.validate([[!!effectName.match(/\//),`Invalid effect name (${model.name}/${effectName})`,],[typeof effects[effectName] !== 'function',`Invalid effect (${model.name}/${effectName}). Must be a function`,],])this.effects[`${model.name}/${effectName}`] = effects[effectName].bind(this.dispatch[model.name])this.dispatch[model.name][effectName] = this.createDispatcher.apply(this,[model.name, effectName])// isEffect用来区分是普通的action，还是异步的，后面的loading插件就是通过这个字段来判断是不是异步操作this.dispatch[model.name][effectName].isEffect = true}},// 用来处理 async/await actions的redux中间键middleware(store) {return next => async (action: R.Action) => {if (action.type in this.effects) {await next(action)// 会把全局的state作为effect方法的第二个参数传入return this.effects[action.type](action.payload,store.getState(),action.meta)}return next(action)}},
}
复制代码

通过exposed将effects挂载到rematch对象上，用来保存所有model中的effects方法。

middleware属性用来定义中间键，处理async/await 异步函数。

onModel用来将所有model的effects方法存储在dispatch上，并使用'modelName/effectName'的key将对应的effect方法存储在全局的effects对象上。

@rematch/loading

对每个model中的effects自动添加loading状态。

export default (config: LoadingConfig = {}): Plugin => {validateConfig(config)const loadingModelName = config.name || 'loading'const converter =config.asNumber === true ? (cnt: number) => cnt : (cnt: number) => cnt > 0const loading: Model = {name: loadingModelName,reducers: {hide: createLoadingAction(converter, -1),show: createLoadingAction(converter, 1),},state: {...cntState,},}cntState.global = 0loading.state.global = converter(cntState.global)return {config: {// 增加一个loading model，用来管理所有的loading状态models: {loading,},},onModel({ name }: Model) {// 用户定义的model如果和注入的loadingmodel重名，则退出这个modelif (name === loadingModelName) {return}cntState.models[name] = 0loading.state.models[name] = converter(cntState.models[name])loading.state.effects[name] = {}const modelActions = this.dispatch[name]// 收集每个model上的effect方法Object.keys(modelActions).forEach((action: string) => {// 通过isEffect来判断是否是异步方法if (this.dispatch[name][action].isEffect !== true) {return}cntState.effects[name][action] = 0loading.state.effects[name][action] = converter(cntState.effects[name][action])const actionType = `${name}/${action}`// 忽略不在白名单中的actionif (config.whitelist && !config.whitelist.includes(actionType)) {return}// 忽略在黑名单中的actionif (config.blacklist && config.blacklist.includes(actionType)) {return}// 指向原来的effect方法const origEffect = this.dispatch[name][action]// 对每个effect方法进行包裹，在异步方法调用前后进行状态的处理const effectWrapper = async (...props) => {try {// 异步方法请求前，同步状态this.dispatch.loading.show({ name, action })const effectResult = await origEffect(...props)// 异步请求成功后，同步状态this.dispatch.loading.hide({ name, action })return effectResult} catch (error) {// 异步请求失败后，同步状态this.dispatch.loading.hide({ name, action })throw error}}// 使用包裹后的函数替代原来的effect方法this.dispatch[name][action] = effectWrapper})},}
}复制代码

这个插件会在store上增加一个名为loading的model，这个model的state有三个属性，分别为global、models和effects。

• global：用来保存全局的状态，只要任意effect被触发，就会引起global的更新
• models：它是一个对象，用来表示每个model的状态，只要是这个model下的effect被触发，就会引起对应model字段的更新
• effects：它是一个对象，以model为单位，记录这个model下每个effects的状态，如果某个effect被触发，会去精确的更新这个effect对应的状态。

在默认情况下，会遍历所有model的effects，对每个isEffect为true的action，用一个异步函数进行包裹，使用try catch捕获错误。

常用的配置项

• asNumber：默认是false，如果设置为true，那么状态就是异步被调用的次数
• name：loading model的name，默认是loading
• whitelist：白名单，一个 action 列表，只收集在列表中的action的状态。命名使用“model名称” / “action名称”，{ whitelist: ['count/addOne'] })
• blacklist：黑名单一个 action 列表，不使用 loading 指示器。{ blacklist: ['count/addOne'] })

store.jsimport { init } from '@rematch/core'
import createLoadingPlugin from '@rematch/loading'// 初始化配置
const loading = createLoadingPlugin({})init({plugins: [loading]
})
复制代码

exmaple modle.jsconst asyncDelay = ms => new Promise(r => setTimeout(r, ms));
export default {state: 0,reducers: {addOne(s) {return s + 1}},effects: {async submit() {// mocking the delay of an effectawait asyncDelay(3000)this.addOne()},}
}复制代码

app.jsconst LoginButton = (props) => (<AwesomeLoadingButton onClick={props.submit} loading={props.loading}>Login</AwesomeLoadingButton>
)const mapState = state => ({count: state.example,loading: {global: state.loading.global,                   // true when ANY effect is runningmodel: state.loading.models.example,            // true when ANY effect on the `login` model is runningeffect: state.loading.effects.example.submit,   // true when the `login/submit` effect is running},
})const mapDispatch = (dispatch) => ({submit: () => dispatch.login.submit()
})export default connect(mapState, mapDispatch)(LoginButton)
复制代码

@rematch/immer

immer 是Mobx作者写的一个immutable库，利用ES6的proxy和defineProperty实现js的不可变数据。相比于ImmutableJS，操作更简单，也不用学习特有的API。

对于一个复杂的对象，immer会复用没有改变的部分，仅仅替换修改了的部分，相比于深拷贝，可以大大的减少开销。

对于react和redux，immer可以大大减少setState和reducer的代码量，并提供更好的可读性。

举个栗子，想要修改todoList中某项的状态，常规的写法

todos = [{todo: 'bbbb', done: true},{todo: 'aaa', done: false}
];state的情况
this.setState({todos: [...todos.slice(0, index),{...todos[index],done: !todos[index].done},...todos.slice(index + 1)]
})reducer的情况
const reducer = (state, action) => {switch (action.type) {case 'TRGGIER_TODO':const { members } = state;return {...state,todos: [...todos.slice(0, index),{...todos[index],done: !todos[index].done},...todos.slice(index + 1)]}default:return state}
}
复制代码

如果使用immer，代码可以简化为

import produce from 'immer'state的情况
this.setState(produce(draft => {draft.todos[index].done = !draft.todos[index].done;
))reducer的情况
const reducer = produce((draft, action) => {switch (action.type) {case 'TRGGIER_TODO':draft.todos[index].done = !draft.todos[index].done;}
})
复制代码

这个插件重写了redux的combineReducers方法，从而支持了immer。

import { Models, Plugin } from '@rematch/core'
import produce from 'immer'
import { combineReducers, ReducersMapObject } from 'redux'function combineReducersWithImmer(reducers: ReducersMapObject) {const reducersWithImmer = {}// model的reducer函数必须有返回，因为immer只支持对象类型for (const [key, reducerFn] of Object.entries(reducers)) {reducersWithImmer[key] = (state, payload) => {// 如果state不是对象，则直接返回reducer的计算值if (typeof state === 'object') {return produce(state, (draft: Models) => {const next = reducerFn(draft, payload)if (typeof next === 'object') {return next}})} else {return reducerFn(state, payload)}}}return combineReducers(reducersWithImmer)
}const immerPlugin = (): Plugin => ({config: {redux: {combineReducers: combineReducersWithImmer,},},
})export default immerPlugin
复制代码

使用插件

store.jsimport { init } from '@rematch/core'
import immerPlugin from '@rematch/immer';const immer = immerPlugin();init({plugins: [immer]
})复制代码

model.jsconst immerTodos = {state: [{todo: 'Learn typescript',done: true,}, {todo: 'Try immer',done: false,}],reducers: {addTodo(state, payload) {state.push(payload);return state;},triggerTodo(state, payload) {const { index } = payload;state[index].done = !state[index].done;return state;},},
};export default immerTodos;
复制代码

rematch-plugin-default-reducer

对于一般的model而言，reducer的作用就是根据state和action来生成新的state，类似于(state, action) => state，这个plugin的作用是为每个model生成一个名为setValues的reducer。如果是state是一个对象，会对action.payload和state使用Object.assign去进行属性的合并；如果state是基础类型，会使用action.payload去覆盖state。

const DefaultReducerPlugin = {onModel(model) {const { reducers = {} } = model;if (Object.keys(reducers).includes('setValues')) {return false;}reducers.setValues = (state, payload) => {if (isObject(payload) && isObject(state)) {return Object.assign({}, state, payload);}return payload;};this.dispatch[model.name].setValues = this.createDispatcher.apply(this,[model.name, 'setValues'],);},
};
复制代码

使用

const countModel = {state: {configList: [],},effects: {async fetchConfigList() {const res = await fetch({url});res && res.list && this.setValues({configList: res.list,});},},
};initimport defaultReducerPlugin from 'rematch-plugin-default-reducer';const store = init({...models,plugins: [defaultReducerPlugin],...});复制代码