@lagunovsky/redux-react-router
Advanced tools
Comparing version 1.0.0 to 2.0.2
@@ -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", |
174
README.md
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
22052
44