0.0.8-1 • Published 4 years ago
rdxh v0.0.8-1
Redux Helper
Helper to reduce the redux code boilerplate.
Install
npm i rdxh
How to Use
newAction
standard redux calls
on the store level
import {newAction} from 'rdxh'
const setLanguage = newAction('@myApp/myPkg/setLanguage', (language: string) => language)
const addLanguage = newAction('@myApp/myPkg/addLanguage',
(language: string, languages: string[]) => [...languages, language]
)
const rootReducer = combineReducers({
...setLanguage.toCombineReducer,
...addLanguage.toCombineReducer
})
on the epic level
import {Action} from 'rdxh'
import {Observable, ...} from 'rxjs'
import {ActionsObservable, ofType, StateObservable} from 'redux-observable'
export const addLanguageEpic = (
action$: ActionsObservable<Action<string>>,
state$: StateObservable<any>): Observable<any> =>
action$.pipe(
ofType(addLanguage.type),
switchMap(action => {
const newLanguage = action.content
// can use state$.source + switchMap also
const languages = addLanguage.toState(state$.value)
/* ... your code ... */
})
)
on the react level
const mapState = (reduxState: any) => ({
language: setLanguage.toState(reduxState).content,
languages: addLanguage.toState(reduxState).content
})
const mapDispatch = {
setLanguage: setLanguage,
removeLanguage: setLanguage.reset,
addLanguage: addLanguage,
emptyLanguages: addLanguage.reset,
}
newAsyncAction
useful on async redux calls
on the store level
import {newAsyncAction} from 'rdxh'
const getUser = newAsyncAction<number, User>('@myApp/myPkg/setLanguage')
const rootReducer = combineReducers({...getUser.toCombineReducer})
on the epic level
import {Action} from 'rdxh'
import {Observable, ...} from 'rxjs'
import {ActionsObservable, ofType, StateObservable} from 'redux-observable'
export const getUserEpic = (
action$: ActionsObservable<Action<number>>,
state$: StateObservable<any>,
Service: service): Observable<any> =>
action$.pipe(
ofType(getUser.type),
switchMap(action => service.getUser$(action.payload).pipe(
map((user:User) => getUser.success(user)),
catchError((error: Error) => of(getUser.failed(error)))
))
)
on the react level
const mapState = (reduxState: any) => ({
user: getUser.toState(reduxState).content,
error: getUser.toState(reduxState).error,
hasError: getUser.toState(reduxState).hasError,
isLoading: getUser.toState(reduxState).isLoading,
})
const mapDispatch = {
getUser: getUser,
clearError: getUser.resetError
}