Gathering detailed insights and metrics for redux-ui-router
Gathering detailed insights and metrics for redux-ui-router
Gathering detailed insights and metrics for redux-ui-router
Gathering detailed insights and metrics for redux-ui-router
react-router-redux
Ruthlessly simple bindings to keep react-router and redux in sync
connected-react-router
A Redux binding for React Router v4 and v5
redux-first-history
Redux First History - Redux history binding support react-router - @reach/router - wouter
@lagunovsky/redux-react-router
A Redux binding for React Router v6
npm install redux-ui-router
Module System
Min. Node Version
Typescript Support
Node Version
NPM Version
143 Stars
125 Commits
48 Forks
9 Watching
5 Branches
16 Contributors
Updated on 26 Jul 2023
JavaScript (97.79%)
HTML (1.15%)
CSS (1.05%)
Cumulative downloads
Total Downloads
Last day
7.5%
487
Compared to previous day
Last week
-1.2%
2,349
Compared to previous week
Last month
25.4%
9,018
Compared to previous month
Last year
55.4%
75,241
Compared to previous year
ngRedux bindings for Angular UI Router - Keep your router state inside your ngRedux store.
$state
$stateParams
1$ npm install redux-ui-router
ngRedux UI Router includes a reducer which is responsible for managing the current route parameters inside your store.
Include this reducer by importing it from redux-ui-router
:
import {combineReducers} from 'redux';
import {router} from 'redux-ui-router';
import myReducer from './myReducer';
const rootReducer = combineReducers({
myReducer,
router
});
export default rootReducer;
This will provide you the ability to tap into the current route parameters from state.router
. Typically route parameters would come from $stateParams
, instead you will now use state.router
to grab these parameters. This makes it easier when you derive new data from your store, or when you perform an action that requires a state parameter.
Note: This pattern will require you to enforce it yourself, there is nothing preventing you from using $stateParams
.
In a controller or selector, we can now access the state of the router:
class SomeController {
constructor($ngRedux,$scope) {
let disconnect = $ngRedux.connect(state => ({router: state.router}))(this);
...
}
}
Note: As of v0.4.0, Immutable.js is no longer used. To access router properties, use router.currentParams[myParam]
instead of router.getIn(['currentParams', 'myParam'])
.
ngRedux UI Router includes several actions which mimic functionality that Angular UI Router provides. These actions should be used instead of interacting directly with $state
. These actions can be imported directly from redux-ui-router
.
This action create will trigger a $state.go in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.go function.
This action create will trigger a $state.reload in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.reload function.
This action create will trigger a $state.transitionTo in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.transitionTo function.
ngRedux UI Router includes a middleware for performing $state
interactions based on the above actions being fired. Whenever one of the above actions is fired, the corresponding $state
function is called. For example, firing the stateGo
action will cause the middleware to perform a $state.go
function under the hood, and then inform the system that upon resolving the transition, that the action was fired.
The middleware should be used when creating your ngRedux store, this should be done as follows:
$ngReduxProvider.createStoreWith(reducers, [
'myOtherMiddleware',
'ngUiRouterMiddleware',
thunk,
logger
]);
For additional information, refer to the ngRedux documentation.
ngReudx UI Router provides a listener which taps into Angular UI Router's $stateChangeStart
, $locationChangeSuccess
, $stateChangeError
, and $stateNotFound
events. The listener is responsible for firing actions whenever one of these events occur. This allows us to track the state of the router whenever it is interacted with.
This listener is in the run block of the ngReduxUiRouter module. Including it in your app module will automatically set this up to begin listening to UI Router events.
// Import Angular
import angular from 'angular';
import ngRedux from 'ng-redux';
import ngReduxUiRouter from 'redux-ui-router';
// Import Angular Components
import components from './components';
// Import Configuration
import configNgReduxProvider from './config/ng-redux';
export default angular
.module('myApp', [
ngRedux,
ngReduxUiRouter,
components
])
.config(configNgReduxProvider)
.name;
For a more complete example, take a look at the example here.
To run the example:
git clone https://github.com/neilff/redux-ui-router/
npm install
cd example
npm install
npm run start
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 6/22 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
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
103 existing vulnerabilities detected
Details
Score
Last Scanned on 2024-11-18
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