Gathering detailed insights and metrics for redux-class-decorators
Gathering detailed insights and metrics for redux-class-decorators
Gathering detailed insights and metrics for redux-class-decorators
Gathering detailed insights and metrics for redux-class-decorators
npm install redux-class-decorators
Typescript
Module System
Node Version
NPM Version
JavaScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
7 Stars
81 Commits
1 Forks
3 Watchers
36 Branches
1 Contributors
Updated on Feb 28, 2025
Latest Version
3.2.4
Package Id
redux-class-decorators@3.2.4
Unpacked Size
201.64 kB
Size
50.37 kB
File Count
7
NPM Version
6.4.1
Node Version
10.15.3
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
45
1npm install redux-class-decorators
1yarn add redux-class-decorators
Writing reducers can be annoying, it takes time to create actionTypes, and actions, and to put it all into a switch. The benefits of this package is that you don't have to manage a separate actionTypes file. You get to define actions and a reducer in classes and all your types and API calls will live on just some objects. Just a matter of preference.
You haven't to declare or manage string constants. This package meets the standard for stream action objects and will automatically declare string constants for types. Also this package works well with redux-thunk.
If you have any questions, you can see examples of use.
Redux recommends creating constants, action creators and reducers separately. And we try to stick to this rule.
Reducer:
1import { ReducerClass } from 'redux-class-decorators' 2 3@ReducerClass('Profile') 4class ProfileReducer { 5 static initialState = { 6 value: null, 7 loading: false, 8 } 9 10 static startLoading(state, action) { 11 return { 12 ...state, 13 loading: true, 14 } 15 } 16 17 static finishLoading(state, action) { 18 return { 19 ...state, 20 value: action.payload, 21 loading: false, 22 } 23 } 24 25 static clear(state) { 26 return { 27 ...state, 28 value: null, 29 loading: false, 30 } 31 } 32}
Actions:
1import { ActionClass } from 'redux-class-decorators' 2 3@ActionClass 4class ProfileActionSet { 5 static get() { 6 return (dispatch, getState) => { 7 dispatch({ 8 type: ProfileReducer.startLoading, 9 }) 10 11 const profile = { id: 1, name: 'Mike' } 12 13 dispatch({ 14 type: ProfileReducer.finishLoading, 15 payload: profile, 16 }) 17 } 18 } 19 20 static clear() { 21 return { 22 type: ProfileActionSet.clear, 23 } 24 } 25}
Usage:
1// Create store 2const store = createStore(ProfileReducer.$reducer, null, applyMiddleware(thunk)) 3 4// Get dispatch 5const dispatch = store.dispatch 6 7dispatch(ProfileActionSet.get()) 8// Actions: 9// { type: 'PROFILE__START_LOADING' } 10// { type: 'PROFILE__FINISH_LOADING', payload: { id: 1, name: 'Mike' } } 11// state == { value: { id: 1, name: 'Mike' }, loading: false } 12 13dispatch(Something.clear()) // { type: 'PROFILE__CLEAR' } 14// state == { value: null, loading: false }
Example of using redux-class-decorators
:
PlumbingActionClass
allows you to use one class to work with different instances.
Reducer:
1import { PlumbingReducerClass } from 'redux-class-decorators' 2 3@PlumbingReducerClass('Banner') 4class BannerReducer { 5 static $getInitialState() { 6 return { 7 value: null, 8 } 9 } 10 11 static setValue(state, action) { 12 return { 13 ...state, 14 value: action.payload, 15 } 16 } 17}
Actions:
1import { PlumbingActionClass } from 'redux-class-decorators' 2 3@PlumbingActionClass 4class Banner { 5 static $getIndex(params) { 6 return params.type 7 } 8 9 static add(newValue) { 10 return { 11 type: BannerReducer.setValue, 12 payload: newValue, 13 } 14 } 15}
Usage:
1// Create store 2const store = createStore(BannerReducer.$reducer, null, applyMiddleware(thunk)) 3 4// Get dispatch 5const dispatch = store.dispatch 6 7dispatch(Banner.add({ type: 'left', text: 'Test1' })) 8// { type: 'BANNER__SET_VALUE', payload: 5 } 9 10dispatch(Banner.add({ type: 'right', text: 'Test2' })) 11// { type: 'BANNER__SET_VALUE', payload: 10 } 12 13// state == { 'left': { value: 'Test1' }, 'right': { value: 'Test2' } }
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
project is archived
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
112 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More