Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lagunovsky/redux-react-router

Package Overview
Dependencies
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lagunovsky/redux-react-router - npm Package Compare versions

Comparing version 1.0.0 to 2.0.2

12

dist/index.d.ts

@@ -50,9 +50,9 @@ import { Action, History, Location } from 'history';

export declare function createRouterMiddleware(history: History): Middleware;
export declare type ConnectedRouterReducerState = {
export declare type ReduxRouterState = {
location: Location;
action: Action;
};
export declare function createConnectedRouterReducer(history: History): Reducer<ConnectedRouterReducerState, RouterActions>;
export declare type ConnectedRouterSelector = (store: Store) => ConnectedRouterReducerState;
export declare function connectedRouterSelector(state: any): ConnectedRouterReducerState;
export declare function createRouterReducer(history: History): Reducer<ReduxRouterState, RouterActions>;
export declare type ReduxRouterSelector = (store: Store) => ReduxRouterState;
export declare function reduxRouterSelector(state: any): ReduxRouterState;
declare type Props = {

@@ -63,3 +63,3 @@ store: Store;

enableTimeTravelling: boolean;
routerSelector: ConnectedRouterSelector;
routerSelector: ReduxRouterSelector;
};

@@ -75,3 +75,3 @@ declare type State = {

enableTimeTravelling: boolean;
routerSelector: typeof connectedRouterSelector;
routerSelector: typeof reduxRouterSelector;
};

@@ -78,0 +78,0 @@ constructor(props: Props);

@@ -51,3 +51,3 @@ import React from 'react';

}
function createConnectedRouterReducer(history) {
function createRouterReducer(history) {
const initialRouterState = {

@@ -68,3 +68,3 @@ location: history.location,

}
function connectedRouterSelector(state) {
function reduxRouterSelector(state) {
return state.router;

@@ -77,3 +77,3 @@ }

enableTimeTravelling: process.env.NODE_ENV === 'development',
routerSelector: connectedRouterSelector,
routerSelector: reduxRouterSelector,
};

@@ -122,3 +122,3 @@ constructor(props) {

export { ROUTER_CALL_HISTORY_METHOD, ROUTER_ON_LOCATION_CHANGED, ReduxRouter, back, connectedRouterSelector, createConnectedRouterReducer, createRouterMiddleware, forward, go, onLocationChanged, push, replace, routerActions };
export { ROUTER_CALL_HISTORY_METHOD, ROUTER_ON_LOCATION_CHANGED, ReduxRouter, back, createRouterMiddleware, createRouterReducer, forward, go, onLocationChanged, push, reduxRouterSelector, replace, routerActions };
//# sourceMappingURL=index.es.js.map

@@ -59,3 +59,3 @@ 'use strict';

}
function createConnectedRouterReducer(history) {
function createRouterReducer(history) {
const initialRouterState = {

@@ -76,3 +76,3 @@ location: history.location,

}
function connectedRouterSelector(state) {
function reduxRouterSelector(state) {
return state.router;

@@ -85,3 +85,3 @@ }

enableTimeTravelling: process.env.NODE_ENV === 'development',
routerSelector: connectedRouterSelector,
routerSelector: reduxRouterSelector,
};

@@ -134,5 +134,4 @@ constructor(props) {

exports.back = back;
exports.connectedRouterSelector = connectedRouterSelector;
exports.createConnectedRouterReducer = createConnectedRouterReducer;
exports.createRouterMiddleware = createRouterMiddleware;
exports.createRouterReducer = createRouterReducer;
exports.forward = forward;

@@ -142,4 +141,5 @@ exports.go = go;

exports.push = push;
exports.reduxRouterSelector = reduxRouterSelector;
exports.replace = replace;
exports.routerActions = routerActions;
//# sourceMappingURL=index.js.map
{
"name": "@lagunovsky/redux-react-router",
"version": "1.0.0",
"version": "2.0.2",
"description": "A Redux binding for React Router v6",

@@ -5,0 +5,0 @@ "author": "Ivan Lagunovsky",

@@ -1,26 +0,30 @@

Connected React Router
Redux React Router
======================
A Redux binding for React Router v6
A Redux binding for React Router v6, based on [Connected React Router](https://github.com/supasate/connected-react-router)
Main features
-------------
:sparkles: Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).
-----
:gift: Supports [React Router v6](https://github.com/ReactTraining/react-router).
- Synchronize router state with redux store through uni-directional flow (i.e. history -> store -> router -> components).
:sunny: Supports functional component hot reloading while preserving state (with [react-hot-reload](https://github.com/gaearon/react-hot-loader)).
- Supports [React Router v6](https://github.com/ReactTraining/react-router/tree/dev) and [History v5](https://github.com/ReactTraining/history)
:tada: Dispatching of history methods (`push`, `replace`, `go`, `goBack`, `goForward`) works for both [redux-thunk](https://github.com/gaearon/redux-thunk) and [redux-saga](https://github.com/yelouafi/redux-saga).
- Supports functional component hot reloading while preserving state.
:snowman: Nested children can access routing state such as the current location directly with `react-redux`'s `connect`.
- Dispatching of history methods (`push`, `replace`, `go`, `goBack`, `goForward`) works for both [redux-thunk](https://github.com/gaearon/redux-thunk)
and [redux-saga](https://github.com/yelouafi/redux-saga).
:clock9: Supports time traveling in Redux DevTools.
- Nested children can access routing state such as the current location directly with `react-redux`'s `connect`.
:muscle: TypeScript
- Supports time traveling in Redux DevTools.
- TypeScript
Installation
-----------
Connected React Router requires **React 16.8 and React Redux 6.0 or later**.
-----
Redux React Router requires **React 16.8, React Redux 6.0, React Router 6.0 or later**.

@@ -33,148 +37,8 @@ $ npm install --save @lagunovsky/redux-react-router

Usage
-----
### Step 1
In your root reducer file,
- Create a function that takes `history` as an argument and returns a root reducer.
- Add `router` reducer into root reducer by passing `history` to `connectRouter`.
- **Note: The key MUST be `router`**.
```js
// reducers.tsx
import { combineReducers } from 'redux'
import { connectRouter } from '@lagunovsky/redux-react-router'
const createRootReducer = (history) => combineReducers({
router: connectRouter(history),
... // rest of your reducers
})
export default createRootReducer
```
See the [examples](https://github.com/lagunovsky/redux-react-router/tree/master/examples) folder
### Step 2
When creating a Redux store,
- Create a `history` object.
- Provide the created `history` to the root reducer creator.
- Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).
```js
// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()
export default function configureStore(preloadedState) {
const store = createStore(
createRootReducer(history), // root reducer with router state
preloadedState,
compose(
applyMiddleware(
routerMiddleware(history), // for dispatching history actions
// ... other middlewares ...
),
),
)
return store
}
```
### Step 3
- Wrap your react-router v4/v5 routing with `ConnectedRouter` and pass the `history` object as a prop. Remember to delete any usage of `BrowserRouter` or `NativeRouter` as leaving this in will [cause](https://github.com/supasate/connected-react-router/issues/230#issuecomment-461628073) [problems](https://github.com/supasate/connected-react-router/issues/230#issuecomment-476164384) synchronising the state.
- Place `ConnectedRouter` as a child of `react-redux`'s `Provider`.
- **N.B.** If doing server-side rendering, you should still use the `StaticRouter` from `react-router` on the server.
```js
// index.js
...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
import { ConnectedRouter } from 'connected-react-router'
import configureStore, { history } from './configureStore'
...
const store = configureStore(/* provide initial state if any */)
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
<> { /* your usual react-router v4/v5 routing */ }
<Switch>
<Route exact path="/" render={() => (<div>Match</div>)} />
<Route render={() => (<div>Miss</div>)} />
</Switch>
</>
</ConnectedRouter>
</Provider>,
document.getElementById('react-root')
)
```
Note: the `history` object provided to `router` reducer, `routerMiddleware`, and `ConnectedRouter` component must be the same `history` object.
Now, it's ready to work!
Examples
--------
See the [examples](https://github.com/supasate/connected-react-router/tree/master/examples) folder
[FAQ](https://github.com/supasate/connected-react-router/tree/master/FAQ.md)
-----
- [How to navigate with Redux action](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-navigate-with-redux-action)
- [How to get the current browser location (URL)](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-get-the-current-browser-location-url)
- [How to set Router props e.g. basename, initialEntries, etc.](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-set-router-props-eg-basename-initialentries-etc)
- [How to hot reload functional components](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-functional-components)
- [How to hot reload reducers](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-hot-reload-reducers)
- [How to support Immutable.js](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-support-immutablejs)
- [How to implement server-side rendering](https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e) ([sample codebase](https://github.com/cereallarceny/cra-ssr))
- [How to migrate from v4 to v5](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-migrate-from-v4-to-v5)
- [How to use connected-react-router with react native](./FAQ.md#how-to-use-connected-react-router-with-react-native)
- [How to use your own context with react-redux](https://github.com/supasate/connected-react-router/tree/master/FAQ.md#how-to-use-your-own-context-with-react-redux)
Build
-----
```bash
npm run build
```
Generated files will be in the `lib` folder.
Development
-----------
When testing the example apps with `npm link` or `yarn link`, you should explicitly provide the same `Context` to both `Provider` and `ConnectedRouter` to make sure that the `ConnectedRouter` doesn't pick up a different `ReactReduxContext` from a different `node_modules` folder.
In `index.js`.
```js
...
import { Provider, ReactReduxContext } from 'react-redux'
...
<Provider store={store} context={ReactReduxContext}>
<App history={history} context={ReactReduxContext} />
</Provider>
...
```
In `App.js`,
```js
...
const App = ({ history, context }) => {
return (
<ConnectedRouter history={history} context={context}>
{ routes }
</ConnectedRouter>
)
}
...
```
Contributors
------------
See [Contributors](https://github.com/supasate/connected-react-router/graphs/contributors) and [Acknowledge](https://github.com/supasate/connected-react-router/blob/master/ACKNOWLEDGE.md).
License
-------
[MIT License](https://github.com/supasate/connected-react-router/blob/master/LICENSE.md)
Note: the `history` object provided to `router` reducer, `routerMiddleware`, and `ReduxRouter` component must be the same `history` object.

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc