redux-ui-router

> ngRedux bindings for Angular UI Router - Keep your router state inside your ngRedux store.

- Maintains router state inside your store
- Use actions to transition your UI instead of $state
- Use your store state to access route params instead of $stateParams

Getting Started

$3

``bash
$ npm install redux-ui-router
``

Table of Contents

- Reducer
- Actions
- Middleware
- Listener
- Example

Reducer

ngRedux UI Router includes a reducer which is responsible for managing the current route parameters inside your store.

$3

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']).

Actions

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.

$3

#### stateGo(to, params, options)

This action create will trigger a $state.go in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.go function.

Documentation Reference

#### stateReload(to, params, options)

This action create will trigger a $state.reload in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.reload function.

Documentation Reference

#### stateTransitionTo(to, params, options)

This action create will trigger a $state.transitionTo in the UiRouter Middleware. Accepts a payload which matches the UI Router $state.transitionTo function.

Documentation Reference

Middleware

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.

$3

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.

Listener

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.

$3

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;

`

Example

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
``