ui-router/redux

UI-Router plugin for Redux integration

UI-Router Redux  

Keep UI-Router and Redux state in sync.

Introduction

UI-Router works well combined with Redux. You just need to connect() your routed components and they can access the application state as you would expect, as well as dispatch actions.

But you might want to do some more advanced stuff, like leveraging router transitions as actions for your reducers, or trigger router transitions via redux actions.

What you can do with this library:

• Dispatch a Redux action each time a transition occurs
• Keep transitioning information in Redux state
• Trigger router transitions via Redux actions

How it works

The library exposes a core UI-Router plugin, a reducer, a middleware and an action creator. The core is framework agnostic, works directly with Redux and UI-Router and can be used anywhere.

It also exposes framework specific components to help integrate better the plugin in your applications. The current framework implementations are:

• React

Getting started

Depending on the framework you're using, the initial boilerplate may differ a bit.

Installation

The package is publish on the npm repository and can be installed using yarn or npm.

yarn add @uirouter/redux

React

import { pushStateLocationPlugin, UIRouterReact, UIView } from '@uirouter/react';
import { createRouterMiddleware, routerReducer } from '@uirouter/redux';
import { ConnectedUIRouter } from '@uirouter/redux/lib/react';
import { applyMiddleware, combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';

// Instantiate the Router
const router = new UIRouterReact();

// Create the Redux middleware by passing it
const routerMiddleware = createRouterMiddleware(router);

// Create the Redux reducer
const reducer = combineReducers({
  // ... your reducers
  router: routerReducer,
});

// And finally create the Redux store
const store = createStore(reducer, applyMiddleware(routerMiddleware));

// Use the ConnectedUIRouter component and pass it the
// router instance. It will get the Redux store from
// the React Context and apply the plugin for you
const app = (
  <Provider store={store}>
    <ConnectedUIRouter
      router={router}
      plugins={[pushStateLocationPlugin]}
      states={states}
    >
      <UIView />
    </ConnectedUIRouter>
  </Provider>
);

Development

Clone the library and install the dependencies with npm install or yarn.

You can run the React example with yarn start but you need to go into examples/react and install the dependencies there as well.

Building the library

To build the library just install the dependencies and run the build script:

yarn install
yarn build

redux's Issues

Duplicate state registration on initialization

Hi there,

I am using this as part of Electron based application.
I am not sure if I am the only one, but I've encountered a duplicate state error when configuring this.

Error: State '${state.name}' is already defined
    at StateQueueManager.register (/home/user/projects/project-electron/node_modules/@uirouter/core/lib/state/@uirouter/core/state/stateQueueManager.ts:35:15)
    at StateRegistry.register (/home/user/projects/project-electron/node_modules/@uirouter/core/lib/state/@uirouter/core/state/stateRegistry.ts:128:28)
    at eval (webpack-internal:///./node_modules/@uirouter/redux/lib/react/ConnectedUIRouter.js:30:49)
    at Array.forEach (<anonymous>)
    at ConnectedUIRouter (webpack-internal:///./node_modules/@uirouter/redux/lib/react/ConnectedUIRouter.js:29:12)
    at renderWithHooks (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:14803:18)
    at mountIndeterminateComponent (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17482:13)
    at beginWork (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18596:16)
    at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:237:16)

Upon further inspection it looks like ConnectedUIRouter registers states without checking for their existence first.

Changing this:
https://github.com/ui-router/redux/blob/master/react/ConnectedUIRouter.tsx#L35-L37

    (states || []).forEach(state =>
      router.current.stateRegistry.register(state)
    );

to this:

    (states || [])
      .filter(state => !Boolean(router.current.stateRegistry.get(state.name)))
      .forEach(state => router.current.stateRegistry.register(state));

works for me.

Is not working with react-redux 6

Is not working with react redux 6.0.1, the problem is the store value in the context, is coming undefined, looks like the current version of "ui-router/redux" is using the legacy React context API.

I builded this solution for my project but the context API should be change it for future versions of React.

import store from '@store';
import { pushStateLocationPlugin, UIView } from '@uirouter/react';
import { ConnectedUIRouter } from '@uirouter/redux/lib/react';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import config from './config';
import { router } from './index';
import states from './states';

const plugins = [
  pushStateLocationPlugin
];

export default class AppRouter extends React.Component<any> {
  public static childContextTypes = {
    store: PropTypes.object
  };

  public getChildContext() {
    return {
      store,
    };
  }

  public render() {
    return (
      <ConnectedUIRouter
        router={router}
        plugins={plugins}
        states={states}
        config={config}
      >
        <UIView />
      </ConnectedUIRouter>
    );
  }
}

Storing transition deregistration functions

redux/core/applyHooks.ts

Line 69 in a90e709

const removeHooksFunctions: Function[] = [];

Could you please explain why is it needed to keep all the deregistration function?

If I understand this correctly, this array (removeHooksFunctions) will gather all the deregistration functions for all transitions triggered during the router lifetime. Do we need them even after the transitions are finished?

Trouble with redux-devtools-extension

Anyone experienced trouble using this with the extension.. I get weird crashes, I see high CPU/Memory usage.

Redux Actions only include onStart and onFinish

Currently, the only redux actions for UIRouter transitions are for onStart and onFinish. Based on https://ui-router.github.io/guide/transitions#lifecycle-events, even when the onFinish event fires, the transition has not actually completed, meaning that if a user wants to get the current router state values, they would have to use transition.to() rather than transition.router.globals.current.
The problem is that transition.to() doesn't always have all the params for the next transition (and accessing them requires using param.value), making it tricky to depend on the onFinish event in some cases.

I have a fix (#7) that just adds dispatch for the onSuccess event, which, when fired should have the router state updated successfully.

Parameter example?

Can we get an example of how to use a route parameter to filter props in a component? e.g. filter todos by whether they're completed or not?

Or would the ui-router/react examples suffice for this?

How to properly use resolvers

Coming from the old angular I loved the resolvers in ui-router, however I'm having trouble using them with Redux. My main issue is that usually I enclose my API into a service which was then injected into the router, however with redux, I have no idea how to achieve this... A little example/demo would be very helpful

Plugins can only be set via props, not by manually setting them on router instance.

Currently, ConntectUIRouter requires plugins to be passed as a prop. This limits the ability to apply plugins exclusively by setting them on the router instance.

For example

const router = new UIRouterReact();
router.plugin(pushStateLocationPlugin);
const store = createRoutedStore(router);

const App = () => (
  <Provider store={store}>
    <ConnectedUIRouter
      router={router}
      states={states}
    >

instead of passing the pushStateLocationPlugin in via plugins prop here.

Pr #14 defaults the plugins prop to an empty array which allows users to set these manually when creating the router instance.

Action creator and middleware should accept TransitionOptions

Hello

Wondering if we can add a third parameter to pass in transitionOptions?

https://github.com/ui-router/redux/blob/master/core/middleware.ts#L12

Thnx

[BUG] Unable to import ConnectedUIRouter

@uirouter/redux version: 0.1.0
The following code from homepage isn't working

import { ConnectedUIRouter } from '@uirouter/redux/lib/react';

I was only able to find ConnectUIRouter under _bundles folder, but not under lib: