feat(decorator): introduce ImmerReducer

fix #20

Author: runjuu

package.json

@@ -75,6 +75,7 @@
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-react": "^7.12.4",
     "husky": "^2.1.0",
+    "immer": "^3.1.2",
     "jest": "^24.5.0",
     "lint-staged": "^8.1.5",
     "lodash": "^4.17.11",
@@ -94,6 +95,7 @@
   },
   "peerDependencies": {
     "@asuka/di": "^0.1.3",
+    "immer": "^3.1.2",
     "lodash": "^4.17.11",
     "react": "^16.8.6",
     "reflect-metadata": "^0.1.13",

src/core/decorators/index.ts

@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs'
+import { Draft } from 'immer'
 
-import { defineActionSymbols, effectSymbols, reducerSymbols } from '../symbols'
+import { defineActionSymbols, effectSymbols, reducerSymbols, immerReducerSymbols } from '../symbols'
 import { EffectAction } from '../types'
 import { createActionDecorator } from './action-related'
 
@@ -10,6 +11,10 @@ interface DecoratorReturnType<V> {
   (target: any, propertyKey: string, descriptor: { value?: V; get?(): V }): void
 }
 
+export const ImmerReducer: <S = any>() => DecoratorReturnType<
+  (state: Draft<S>, params?: any) => void
+> = createActionDecorator(immerReducerSymbols)
+
 export const Reducer: <S = any>() => DecoratorReturnType<
   (state: S, params?: any) => S
 > = createActionDecorator(reducerSymbols)

src/core/ikari.ts

@@ -1,12 +1,14 @@
 import { merge, Observable, Subject, Subscription, NEVER } from 'rxjs'
 import { map, catchError } from 'rxjs/operators'
 import { mapValues } from 'lodash'
+import produce from 'immer'
 
 import {
   EffectAction,
   ReducerAction,
   OriginalEffectActions,
   OriginalReducerActions,
+  OriginalImmerReducerActions,
   OriginalDefineActions,
   TriggerActions,
   EffectActionFactories,
@@ -21,6 +23,7 @@ interface Config<State> {
   defaultState: State
   effects: OriginalEffectActions<State>
   reducers: OriginalReducerActions<State>
+  immerReducers: OriginalImmerReducerActions<State>
   defineActions: OriginalDefineActions
   effectActionFactories: EffectActionFactories
 }
@@ -45,7 +48,7 @@ export function combineWithIkari<S>(ayanami: Ayanami<S>): Ikari<S> {
   if (ikari) {
     return ikari
   } else {
-    const { effects, reducers, defineActions } = getOriginalFunctions(ayanami)
+    const { effects, reducers, immerReducers, defineActions } = getOriginalFunctions(ayanami)
 
     Object.assign(ayanami, mapValues(defineActions, ({ observable }) => observable))
 
@@ -54,6 +57,7 @@ export function combineWithIkari<S>(ayanami: Ayanami<S>): Ikari<S> {
       defaultState: ayanami.defaultState,
       effects,
       reducers,
+      immerReducers,
       defineActions,
       effectActionFactories: getEffectActionFactories(ayanami),
     })
@@ -108,9 +112,15 @@ export class Ikari<State> {
       this.state.getState,
     )
 
+    const [immerReducerActions$, immerReducerActions] = setupImmerReducerActions(
+      this.config.immerReducers,
+      this.state.getState,
+    )
+
     this.triggerActions = {
       ...effectActions,
       ...reducerActions,
+      ...immerReducerActions,
       ...mapValues(this.config.defineActions, ({ next }) => next),
     }
 
@@ -127,6 +137,13 @@ export class Ikari<State> {
         this.handleAction(action)
       }),
     )
+
+    this.subscription.add(
+      immerReducerActions$.subscribe((action) => {
+        this.log(action)
+        this.handleAction(action)
+      }),
+    )
   }
 
   destroy() {
@@ -218,3 +235,31 @@ function setupReducerActions<State>(
 
   return [merge(...reducers), actions]
 }
+
+function setupImmerReducerActions<State>(
+  immerReducerActions: OriginalImmerReducerActions<State>,
+  getState: () => State,
+): [Observable<Action<State>>, TriggerActions] {
+  const actions: TriggerActions = {}
+  const immerReducers: Observable<Action<State>>[] = []
+
+  Object.keys(immerReducerActions).forEach((actionName) => {
+    const immerReducer$ = new Subject<Action<State>>()
+    immerReducers.push(immerReducer$)
+
+    const immerReducer = immerReducerActions[actionName]
+
+    actions[actionName] = (params: any) => {
+      const nextState = produce(getState(), (draft) => {
+        immerReducer(draft, params)
+      })
+
+      immerReducer$.next({
+        reducerAction: { params, actionName, nextState },
+        originalActionName: actionName,
+      })
+    }
+  })
+
+  return [merge(...immerReducers), actions]
+}

src/core/symbols.ts

@@ -13,11 +13,21 @@ export const reducerSymbols: ActionSymbols = {
   actions: Symbol('actions:reducer'),
 }
 
+export const immerReducerSymbols: ActionSymbols = {
+  decorator: Symbol('decorator:immer-reducer'),
+  actions: Symbol('actions:immer-reducer'),
+}
+
 export const defineActionSymbols: ActionSymbols = {
   decorator: Symbol('decorator:defineAction'),
   actions: Symbol('actions:defineAction'),
 }
 
-export const allActionSymbols = [effectSymbols, reducerSymbols, defineActionSymbols]
+export const allActionSymbols = [
+  effectSymbols,
+  reducerSymbols,
+  immerReducerSymbols,
+  defineActionSymbols,
+]
 
 export const ikariSymbol = Symbol('ikari')

src/core/types.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs'
+import { Draft } from 'immer'
 
 import { Ayanami } from './ayanami'
 
@@ -77,11 +78,19 @@ type UnpackReducerPayload<Func, State> = Func extends () => State
   ? UnpackReducerFunctionArguments<Func>
   : never
 
+type UnpackImmerReducerPayload<Func, State> = Func extends (state: Draft<State>) => void
+  ? UnpackReducerFunctionArguments<Func>
+  : Func extends (state: Draft<State>, payload: any) => void
+  ? UnpackReducerFunctionArguments<Func>
+  : never
+
 type UnpackDefineActionPayload<OB> = OB extends Observable<infer P> ? ArgumentsType<[P]> : never
 
 type UnpackPayload<F, S> = UnpackEffectPayload<F, S> extends never
   ? UnpackReducerPayload<F, S> extends never
-    ? UnpackDefineActionPayload<F>
+    ? UnpackImmerReducerPayload<F, S> extends never
+      ? UnpackDefineActionPayload<F>
+      : UnpackImmerReducerPayload<F, S>
     : UnpackReducerPayload<F, S>
   : UnpackEffectPayload<F, S>
 
@@ -115,6 +124,10 @@ export type OriginalReducerActions<State> = ObjectOf<
   (state: State, payload: any) => Readonly<State>
 >
 
+export type OriginalImmerReducerActions<State> = ObjectOf<
+  (state: Draft<State>, payload: any) => void
+>
+
 export type OriginalDefineActions = ObjectOf<{
   next(params: any): void
   observable: Observable<any>

src/core/utils/get-original-functions.ts

@@ -1,15 +1,21 @@
 import { Subject } from 'rxjs'
 import { pick, mapValues } from 'lodash'
 
-import { OriginalDefineActions, OriginalEffectActions, OriginalReducerActions } from '../types'
+import {
+  OriginalDefineActions,
+  OriginalEffectActions,
+  OriginalReducerActions,
+  OriginalImmerReducerActions,
+} from '../types'
 import { Ayanami } from '../ayanami'
 import { getActionNames } from '../decorators'
-import { effectSymbols, reducerSymbols, defineActionSymbols } from '../symbols'
+import { effectSymbols, reducerSymbols, immerReducerSymbols, defineActionSymbols } from '../symbols'
 
 const getOriginalFunctionNames = (ayanami: Ayanami<any>) => ({
   effects: getActionNames(effectSymbols, ayanami.constructor),
   reducers: getActionNames(reducerSymbols, ayanami.constructor),
   defineActions: getActionNames(defineActionSymbols, ayanami.constructor),
+  immerReducers: getActionNames(immerReducerSymbols, ayanami.constructor),
 })
 
 const transformDefineActions = (actionNames: string[]): OriginalDefineActions => {
@@ -28,7 +34,7 @@ const transformDefineActions = (actionNames: string[]): OriginalDefineActions =>
 }
 
 export const getOriginalFunctions = (ayanami: Ayanami<any>) => {
-  const { effects, reducers, defineActions } = getOriginalFunctionNames(ayanami)
+  const { effects, reducers, immerReducers, defineActions } = getOriginalFunctionNames(ayanami)
 
   return {
     effects: mapValues(pick(ayanami, effects), (func: Function) =>
@@ -37,6 +43,9 @@ export const getOriginalFunctions = (ayanami: Ayanami<any>) => {
     reducers: mapValues(pick(ayanami, reducers), (func: Function) =>
       func.bind(ayanami),
     ) as OriginalReducerActions<any>,
+    immerReducers: mapValues(pick(ayanami, immerReducers), (func: Function) =>
+      func.bind(ayanami),
+    ) as OriginalImmerReducerActions<any>,
     defineActions: transformDefineActions(defineActions),
   }
 }

src/index.ts

@@ -2,6 +2,7 @@ import 'reflect-metadata'
 
 export {
   Ayanami,
+  ImmerReducer,
   Reducer,
   Effect,
   DefineAction,

test/specs/ikari.spec.ts

@@ -1,4 +1,5 @@
 import { Subject, NEVER } from 'rxjs'
+import { Draft } from 'immer'
 
 import '../../src'
 import { Ikari, BasicState } from '../../src/core'
@@ -23,6 +24,11 @@ const createIkariConfig = () => ({
   reducers: {
     setCount: (state: State, count: number): State => ({ ...state, count }),
   },
+  immerReducers: {
+    immerSetCount: (state: Draft<State>, count: number) => {
+      state.count = count
+    },
+  },
   defineActions: { hmm: getDefineAction() },
   effectActionFactories: {},
 })
@@ -49,17 +55,23 @@ describe('Ikari spec:', () => {
       expect(ikari.state.getState()).toEqual({ count: 0 })
     })
 
-    it('triggerActions is combination of effects, reducers and defineActions', () => {
-      expect(Object.keys(ikari.triggerActions).length).toBe(3)
+    it('triggerActions is combination of effects, reducers, immerReducers and defineActions', () => {
+      expect(Object.keys(ikari.triggerActions).length).toBe(4)
       expect(typeof ikari.triggerActions.never).toBe('function')
       expect(typeof ikari.triggerActions.setCount).toBe('function')
+      expect(typeof ikari.triggerActions.immerSetCount).toBe('function')
       expect(typeof ikari.triggerActions.hmm).toBe('function')
     })
 
     it('reducers can change state', () => {
       ikari.triggerActions.setCount(1)
       expect(ikari.state.getState()).toEqual({ count: 1 })
     })
+
+    it('ImmerReducers can change state', () => {
+      ikari.triggerActions.immerSetCount(2)
+      expect(ikari.state.getState()).toEqual({ count: 2 })
+    })
   })
 
   describe('after destroy', () => {

test/specs/immer-reducer.spec.ts

@@ -0,0 +1,59 @@
+import { Injectable, Test } from '@asuka/di'
+import { Draft } from 'immer'
+
+import { Ayanami, ImmerReducer, getAllActionsForTest, ActionMethodOfAyanami } from '../../src'
+
+interface TipsState {
+  tips: string
+}
+
+@Injectable()
+class Tips extends Ayanami<TipsState> {
+  defaultState = {
+    tips: '',
+  }
+
+  @ImmerReducer()
+  removeTips(state: Draft<TipsState>) {
+    state.tips = ''
+  }
+
+  @ImmerReducer()
+  setTips(state: Draft<TipsState>, tips: string) {
+    state.tips = tips
+  }
+
+  @ImmerReducer()
+  addTips(state: Draft<TipsState>, tips: string) {
+    state.tips = `${state.tips} ${tips}`
+  }
+}
+
+describe('ImmerReducer spec:', () => {
+  let tips: Tips
+  let actions: ActionMethodOfAyanami<Tips, TipsState>
+
+  beforeEach(() => {
+    const testModule = Test.createTestingModule().compile()
+
+    tips = testModule.getInstance(Tips)
+    actions = getAllActionsForTest(tips)
+  })
+
+  it('with payload', () => {
+    actions.setTips('one')
+    expect(tips.getState()).toEqual({ tips: 'one' })
+  })
+
+  it('with payload and state', () => {
+    actions.setTips('two')
+    actions.addTips('three')
+    expect(tips.getState()).toEqual({ tips: 'two three' })
+  })
+
+  it('without payload and state', () => {
+    actions.setTips('one')
+    actions.removeTips()
+    expect(tips.getState()).toEqual({ tips: '' })
+  })
+})

yarn.lock

@@ -3678,6 +3678,11 @@ ignore@^4.0.2:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
+immer@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/immer/-/immer-3.1.2.tgz#1f24f2e25433f5ff168a1ff6c8c6366d2106e61a"
+  integrity sha512-pi8JuvJ9c+98DlpDms/o0YLLg5khP8Qzjd8CtIGc4qVm2eoLdQGivJL266nWccofKT/oBSxnhAh/o+nmOXtLXw==
+
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"