Gathering detailed insights and metrics for redux-await-action
Gathering detailed insights and metrics for redux-await-action
Library to listen for redux actions in react components and handling logic based on the dispatched action.
Installations
npm install redux-await-actionDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=12
Node Version
12.22.12
NPM Version
6.14.16
Releases
3
Languages
2
TypeScript
JavaScript
TypeScript (75.02%)
JavaScript (24.98%)
Developer
bmaximilian
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
3 Stars
10 Commits
2 Forks
1 Watchers
1 Branches
3 Contributors
Updated on Jun 28, 2023
Maintainers
1
Package Meta Information
Latest Version
1.0.2
Package Id
redux-await-action@1.0.2
Unpacked Size
51.67 kB
Size
24.69 kB
File Count
33
NPM Version
6.14.16
Node Version
12.22.12
Total Downloads
Cumulative downloads
Total Downloads
NaN
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
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
Dev Dependencies
44
@golevelup/ts-jest@testing-library/jest-dom@testing-library/react@types/enzyme@types/enzyme-adapter-react-16@types/jest@types/react@types/react-dom@types/react-redux@typescript-eslint/eslint-plugin@typescript-eslint/eslint-plugin-tslint@typescript-eslint/parserenzymeenzyme-adapter-react-16eslinteslint-config-airbnb-baseeslint-config-prettiereslint-import-resolver-typescripteslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jesteslint-plugin-jsdoceslint-plugin-jsx-a11yeslint-plugin-prefer-arroweslint-plugin-prettiereslint-plugin-reacteslint-plugin-react-hookseslint-plugin-tsdochuskyjestjest-date-mockjest-extendedlint-stagedprettierreactreact-domreact-reduxreduxts-jestts-nodetslinttypedoctypedoc-plugin-markdowntypescript
Await Redux Actions
A redux extension to wait for actions in react components Requires the installation of react (>= 16.3) and redux (>= 4)
If using redux, sometimes there is a need to wait with specific logic until an action is dispatched. This is especially needed when decoupling ajax requests from react components with redux-observable or redux-thunk into asynchronous actions.
Installation
npm i --save redux-await-action
Usage
Setting up the middleware
You need to create an instance of the event emitter and apply the middleware to your redux store.
1import { createAwaitMiddleware, StoreAwaitEventEmitter } from 'redux-await-action'; 2 3const awaitEmitter = new StoreAwaitEventEmitter(); 4const storeAwaitMiddleware = createAwaitMiddleware(awaitEmitter); 5 6const store = createReduxStore( 7 rootReducer, 8 applyMiddleware(storeAwaitMiddleware) 9);
Register the Provider
To be able to wait for actions inside the react components, you need to add the StoreAwaitProvider in your JSX. It should be placed somewhere near your redux store provider.
1import { Provider } from 'redux'; 2import { StoreAwaitProvider } from 'redux-await-action'; 3 4return ( 5 <Provider store={store}> 6 <StoreAwaitProvider emitter={awaitEmitter}> 7 {props.children} 8 </StoreAwaitProvider> 9 </Provider> 10);
Wait for actions somewhere in your react components using the useAwaitAction() hook
1import React from 'react'; 2import { connect, DispatchProp } from 'redux'; 3import { useAwaitAction } from 'redux-await-action'; 4 5export const myCoponent = connect()((props: DispatchProp) => { 6 const awaitAction = useAwaitAction(); 7 8 const handleLoadData = () => { 9 /** 10 * This statement creates a promise that resolves when an action with type 'LOAD_DATA_SUCCEEDED' is dispatched. 11 * If 'LOAD_DATA_FAILED' is dispatched earlier, the promise will reject 12 */ 13 awaitAction('LOAD_DATA_SUCCEEDED', 'LOAD_DATA_FAILED').then(() => { 14 window.location.href = 'https://example.org/data-loaded'; 15 }); 16 17 // This dispatches a redux action (is redux functionality). 18 // The action should be async (using something like redux-observable) and dispatch 'LOAD_DATA_SUCCEEDED' when the data is successfully loaded. 19 dispatch({ type: 'LOAD_DATA_START' }); 20 }; 21 22 return ( 23 <button onClick={handleLoadData}> 24 Click Me! 25 </button> 26 ); 27});
Wait for actions somewhere in your react components using the withAwaitAction() HOC
Class based components can't use React hooks. So there needs to be an other way to inject the awaitAction method.
1import React, { Component } from 'react'; 2import { connect, DispatchProp } from 'redux'; 3import { withAwaitAction, WithAwaitAction } from 'redux-await-action'; 4 5class MyCoponent extends Component<DispatchProp & WithAwaitAction> { 6 private handleLoadData = () => { 7 /** 8 * This statement creates a promise that resolves when an action with type 'LOAD_DATA_SUCCEEDED' is dispatched. 9 * If 'LOAD_DATA_FAILED' is dispatched earlier, the promise will reject 10 */ 11 props.storeAwait('LOAD_DATA_SUCCEEDED', 'LOAD_DATA_FAILED').then(() => { 12 window.location.href = 'https://example.org/data-loaded'; 13 }); 14 15 // This dispatches a redux action (is redux functionality). 16 // The action should be async (using something like redux-observable) and dispatch 'LOAD_DATA_SUCCEEDED' when the data is successfully loaded. 17 dispatch({ type: 'LOAD_DATA_START' }); 18 }; 19 20 public render() { 21 return ( 22 <button onClick={handleLoadData}> 23 Click Me! 24 </button> 25 ); 26 } 27} 28 29export default withAwaitAction(connect()(MyComponent));
The await method
The await method that is created from the hook or passed from the HOC takes 1 - 2 arguments.
The first argument is the type of the action that needs to be dispatched in the happy case - so when the returne promise should resolve.
The second argument ts the type of the action that needs to be dispatched when the returned promise should reject.
Both arguments can either be a string (one action type) or an array containing multiple action types.
If one of the arguments is an array, the promise will resolve or reject at the first action that contains one of the passed types.
The method returns a promise.
The returned promise will be resolved when one of the action types of the first parameter is dispatched. The promise resolves whith the dispatched action.
So the dispatched action that made the promise resolve is passed to the then callback.
The returned promise will be rejected when one of the action types of the second parameter is dispatched. The promise rejects the dispatched action.
So the dispatched action that made the promise reject is passed to the catch callback.
Useful links
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 2/10 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/nightly.yml:1
- Warn: no topLevel permission defined: .github/workflows/pull-request.yml:1
- Warn: no topLevel permission defined: .github/workflows/stable-release.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/nightly.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/nightly.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/nightly.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/nightly.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nightly.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/nightly.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/pull-request.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/pull-request.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/pull-request.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pull-request.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/pull-request.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stable-release.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/stable-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stable-release.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/stable-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stable-release.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/stable-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stable-release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/stable-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stable-release.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/bmaximilian/redux-await-action/stable-release.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/nightly.yml:44
- Warn: npmCommand not pinned by hash: .github/workflows/pull-request.yml:40
- Warn: npmCommand not pinned by hash: .github/workflows/stable-release.yml:44
- Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 3 npmCommand dependencies pinned
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Reason
39 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-7wwv-vh3v-89cq
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
3
/10
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