redux-epics-decorator

A Dumb wrapper for redux 💚 redux-observable 💚 react-redux 💚 redux-actions 💚 injection-js

Features

- 🚀 Less boilerplate codes
- 🦄 No magic string Action Types
- 💚 Type Safe, typecheck in Payload
- ⛏ Go to definition, go to your Reducer/Epics with one click
- 🖇 Easy to intergrate into existed redux-observable or other redux middlewares

but which more important is:

!record

Dependeicies

- yarn add redux redux-observable rxjs redux-actions react-redux
- yarn add redux-epics-decorator

Full example project

fixtures

Use yarn && yarn start to play with it.

Usage

``ts
// module.ts
import { Action } from 'redux-actions'
import { ActionsObservable } from 'redux-observable'
import { Observable } from 'rxjs'
import { exhaustMap, takeUntil } from 'rxjs/operators'

import { generateMsg, Msg } from '../service'
import { EffectModule, Module, Effect, Reducer, ModuleActionProps, DefineAction } from 'redux-epics-decorator'

export interface StateProps {
currentMsgId: string | null
allMsgs: Msg[]
}

@Module('your_module_name')
export class Module1 extends EffectModule {
readonly defaltState: StateProps = {
currentMsgId: null,
allMsgs: []
}

@DefineAction('dispose') dispose: Observable

@Effect({
success: (state: StateProps, { payload }: Action) => {
const { allMsgs } = state
return { ...state, allMsgs: allMsgs.concat([payload!]) }
}
})
getMsg(action$: Observable) {
return action$.pipe(
exhaustMap(() => generateMsg().pipe(
takeUntil(this.dispose),
map(this.createAction('success')), // up in Effect Decorator
// dispatch a normal Redux Action
// intergrate to your existed redux system
endWith(this.markAsGlobal({
type: 'notification',
payload: {
type: 'success',
msg: '✨ Get message success!'
}
})),
))
)
}

@Reducer('select_msg')
selectMsg(state: StateProps, { payload }: Action) {
return { ...state, currentMsgId: payload }
}
}

export type DispatchProps = ModuleActionProps
`

`ts
// container.tsx
import { Module1, StateProps, DispatchProps } from './module'

interface OtherProps {
price: number
count: number
}
type Props = StateProps & OtherProps & DispatchProps

const mapStateToProps = (state: GlobalState): StateProps => ({
...state.yourcomponent,
price: otherModule.price,
count: otherModule.count,
})

class YourComponent extends React.PureComponent {
// your codes ...

render() {
// this is same to this.props.dispatch({ type: 'Module1/getMsg' })
this.props.getMsg() // () => Action, type safe here
return (