ui-router / redux Goto Github PK

@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:

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.

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

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.

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>
    );
  }
}

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?

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?

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

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.

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