Awesome Open Source
Awesome Open Source

CircleCI codecov

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

// 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<StateProps> {
  readonly defaltState: StateProps = {
    currentMsgId: null,
    allMsgs: []
  }

  @DefineAction('dispose') dispose: Observable<void>

  @Effect({
    success: (state: StateProps, { payload }: Action<Msg>) => {
      const { allMsgs } = state
      return { ...state, allMsgs: allMsgs.concat([payload!]) }
    }
  })
  getMsg(action$: Observable<void>) {
    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<string>) {
    return { ...state, currentMsgId: payload }
  }
}

export type DispatchProps = ModuleActionProps<Module1>
// 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<Props> {
  // your codes ...

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

export connect(Module1)(mapStateToProps)(YourComponent)
// store
import { combineModuleEpics, combineModuleReducers, createEpicMiddleware } from 'redux-epics-decorator'

import { StateProps as YourComponentStateProps, Module1 } from './yourcomponent/module'

interface GlobalState {
  yourcomponent: YourComponentStateProps
}

const rootEpic = combineEpics(
  combineModuleEpics(
    Module1,
    Module2,
    Module3,
  ),
  // other normal epics from redux-observable
  epic1,
  epic2,
  epic3,
)


const rootReducer = combineReducers({
  ...combineModuleReducers({
    module1: Module1,
    module2: Module2,
    module3: Module3,
  }),
  // other normal reducers from redux-actions
  other1: otherReducers1,
  other2: otherReducers2,
})

const epicMiddleware = createEpicMiddleware()

export default store = createStore<GlobalState>(rootReducer, compose<any>(
  applyMiddleware(
    epicMiddleware
  )
))

epicMiddleware.run(rootEpic)

Docs and Recipe

Please read Docs and recipe


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (10,415) 
react (5,175) 
redux (1,152) 
redux-middleware (18) 
redux-observable (17) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210