https://github.com/ui-router/redux

UI-Router plugin for Redux integration
https://github.com/ui-router/redux

plugin react redux ui-router

Last synced: 1 day ago
JSON representation

UI-Router plugin for Redux integration

• Host: GitHub
• URL: https://github.com/ui-router/redux
• Owner: ui-router
• License: mit
• Created: 2017-10-05T17:39:11.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-12-27T20:34:05.000Z (almost 4 years ago)
• Last Synced: 2024-04-25T21:45:25.183Z (7 months ago)
• Topics: plugin, react, redux, ui-router
• Language: TypeScript
• Size: 572 KB
• Stars: 12
• Watchers: 6
• Forks: 6
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  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

```jsx

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 = (

  

    

      

    

  

);

```

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

```bash

yarn install

yarn build

```