Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

Commit

Permalink
rename router.enhancer to router.connect
Browse files Browse the repository at this point in the history
  • Loading branch information
Ville Saukkonen committed Jul 29, 2017
1 parent 3e530c0 commit e7badbf
Show file tree
Hide file tree
Showing 11 changed files with 48 additions and 40 deletions.
18 changes: 12 additions & 6 deletions ADVANCED.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,16 +37,18 @@ app.use('/*', (req, res) => {
// routerForExpress will infer the basename
// from req.baseUrl!
//
const { reducer, middleware, enhancer } = routerForExpress({
const { reducer, middleware, connect } = routerForExpress({
routes,
request: req
})

const store = createStore(
combineReducers({ router: reducer }),
{ what: 'ever' },
compose(enhancer, applyMiddleware(middleware))
applyMiddleware(middleware)
);

connect(store);

// ...then renderToString() your components as usual,
// passing your new store to your <Provider> component.
Expand Down Expand Up @@ -86,16 +88,18 @@ server.route({
// Create the Redux store, passing in the Hapi
// request to the routerForHapi factory.

const { reducer, middleware, enhancer } = routerForHapi({
const { reducer, middleware, connect } = routerForHapi({
routes,
request
})

const store = createStore(
reducer,
{ what: 'ever' },
compose(enhancer, applyMiddleware(middleware))
applyMiddleware(middleware)
);

connect(store);

// ...then renderToString() your components as usual,
// passing your new store to your <Provider> component.
Expand Down Expand Up @@ -125,16 +129,18 @@ const routes = {

const {
reducer,
enhancer,
connect,
middleware
} = routerForBrowser({ routes });

const store = createStore(
combineReducers({ router: reducer }),
window.__INITIAL_STATE,
compose(enhancer, applyMiddleware(middleware))
applyMiddleware(middleware)
);

connect(store);

// ...then render() your components as usual,
// passing your new store to your <Provider> component.
```
Expand Down
14 changes: 8 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ While React Router is a great, well-supported library, it hoards URL state withi

## Redux usage

To hook into Redux applications, `redux-little-router` uses a store enhancer that wraps the `history` module and adds current and previous router state to your store. The enhancer listens for location changes and dispatches rich actions containing the URL, parameters, and any custom data assigned to the route. `redux-little-router` also adds a middleware that intercepts navigation actions and calls their equivalent method in `history`.
To connect into Redux applications, `redux-little-router` uses a store connector that wraps the `history` module and adds current and previous router state to your store. The connector listens for location changes and dispatches rich actions containing the URL, parameters, and any custom data assigned to the route. `redux-little-router` also adds a middleware that intercepts navigation actions and calls their equivalent method in `history`.

### Wiring up the boilerplate

Expand Down Expand Up @@ -72,11 +72,11 @@ const routes = {

// Install the router into the store for a browser-only environment.
// routerForBrowser is a factory method that returns a store
// enhancer and a middleware.
// connect and a middleware.
const {
reducer,
middleware,
enhancer
connect
} = routerForBrowser({
// The configured routes. Required.
routes,
Expand All @@ -87,11 +87,13 @@ const {
const clientOnlyStore = createStore(
combineReducers({ router: reducer, yourReducer }),
initialState,
compose(enhancer, applyMiddleware(middleware))
applyMiddleware(middleware)
);

connect(clientOnlyStore);
```

Often, you'll want to update state or trigger side effects after loading the initial URL. To maintain compatibility with other store enhancers (particularly ones that handle side effects, like `redux-loop` or `redux-saga`), we require this optional initial dispatch to happen in client code by doing the following:
Often, you'll want to update state or trigger side effects after loading the initial URL. To maintain compatibility with store enhancers (particularly ones that handle side effects, like `redux-loop` or `redux-saga`), we require this optional initial dispatch to happen in client code by doing the following:

```js
import { initializeCurrentLocation } from 'redux-little-router';
Expand Down Expand Up @@ -164,7 +166,7 @@ export const redirect = href => dispatch => {
};
```

On location changes, the store enhancer dispatches a `LOCATION_CHANGED` action that contains at least the following properties:
On location changes, the router connector dispatches a `LOCATION_CHANGED` action that contains at least the following properties:

```js
// For a URL matching /messages/:user
Expand Down
4 changes: 2 additions & 2 deletions demo/client/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import routes from './routes';
import wrap from './wrap';
import Demo from './demo';

const { reducer, enhancer, middleware } = routerForBrowser({ routes });
const { reducer, connect, middleware } = routerForBrowser({ routes });

const store = createStore(
combineReducers({ router: reducer }),
Expand All @@ -22,7 +22,7 @@ const store = createStore(
window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
enhancer(store);
connect(store);
const initialLocation = store.getState().router;
if (initialLocation) {
store.dispatch(initializeCurrentLocation(initialLocation));
Expand Down
2 changes: 1 addition & 1 deletion demo/server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ app.get('/*', (req, res) => {
applyMiddleware(router.middleware)
);

router.enhancer(store);
router.connect(store);
const content = renderToString(wrap(store)(Root));

return res.send(
Expand Down
4 changes: 2 additions & 2 deletions src/enhancer.js → src/connector.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { locationDidChange, didReplaceRoutes, replace } from './actions';

import matchCache from './util/match-cache';

type EnhancerArgs = {|
type ConnectorArgs = {|
history: History,
matchRoute: Function,
createMatcher: Function
|};

export default ({ history, matchRoute, createMatcher }: EnhancerArgs) => (
export default ({ history, matchRoute, createMatcher }: ConnectorArgs) => (
store: Store<*, *>
) => {
let currentMatcher = matchRoute;
Expand Down
4 changes: 2 additions & 2 deletions src/install.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { Location } from './types';

import reducer from './reducer';
import middleware from './middleware';
import enhancer from './enhancer';
import connector from './connector';

import { default as matcherFactory } from './util/create-matcher';
import validateRoutes from './util/validate-routes';
Expand Down Expand Up @@ -36,7 +36,7 @@ export default ({
}
}),
middleware: middleware({ history }),
enhancer: enhancer({
connect: connector({
history,
matchRoute,
createMatcher
Expand Down
6 changes: 3 additions & 3 deletions test/enhancer.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import defaultRoutes from './test-util/fixtures/routes';

chai.use(sinonChai);

describe('Router store enhancer', () => {
describe('Router store connector', () => {
let store;
let historyStub;
let listenStub;
Expand All @@ -24,7 +24,7 @@ describe('Router store enhancer', () => {
const replace = sandbox.spy(() => listen(listenStub));
historyStub = { push, replace, listen };

const { reducer, middleware, enhancer } = install({
const { reducer, middleware, connect } = install({
routes: defaultRoutes,
history: historyStub,
location: { pathname: '/' }
Expand All @@ -35,7 +35,7 @@ describe('Router store enhancer', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
sandbox.spy(store, 'dispatch');
});

Expand Down
10 changes: 5 additions & 5 deletions test/environment/browser-router.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
chai.use(sinonChai);

describe('Browser router', () => {
it('creates a browser store enhancer using history location', () => {
const { enhancer, middleware, reducer } = routerForBrowser({
it('creates a browser store connector using history location', () => {
const { connect, middleware, reducer } = routerForBrowser({
routes,
history: {
location: {
Expand All @@ -27,7 +27,7 @@ describe('Browser router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.pathname', '/home');
expect(state).to.have.nested.property('router.search', '?get=schwifty');
Expand All @@ -38,7 +38,7 @@ describe('Browser router', () => {
});

it('supports basenames', () => {
const { enhancer, middleware, reducer } = routerForBrowser({
const { connect, middleware, reducer } = routerForBrowser({
routes,
basename: '/cob-planet',
history: {
Expand All @@ -55,7 +55,7 @@ describe('Browser router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.basename', '/cob-planet');
expect(state).to.have.nested.property('router.pathname', '/home');
Expand Down
10 changes: 5 additions & 5 deletions test/environment/express-router.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
chai.use(sinonChai);

describe('Express router', () => {
it('creates a server store enhancer using Express request object', () => {
const { enhancer, middleware, reducer } = routerForExpress({
it('creates a server store connector using Express request object', () => {
const { connect, middleware, reducer } = routerForExpress({
routes,
request: {
path: '/home',
Expand All @@ -23,7 +23,7 @@ describe('Express router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.pathname', '/home');
expect(state).to.have.nested.property('router.search', '?get=schwifty');
Expand All @@ -33,7 +33,7 @@ describe('Express router', () => {
});

it('supports basenames', () => {
const { enhancer, middleware, reducer } = routerForExpress({
const { connect, middleware, reducer } = routerForExpress({
routes,
request: {
baseUrl: '/cob-planet',
Expand All @@ -46,7 +46,7 @@ describe('Express router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.basename', '/cob-planet');
expect(state).to.have.nested.property('router.pathname', '/home');
Expand Down
6 changes: 3 additions & 3 deletions test/environment/hapi-router.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import routes from '../test-util/fixtures/routes';
chai.use(sinonChai);

describe('Hapi router', () => {
it('creates a server store enhancer using Hapi request object', () => {
const { enhancer, middleware, reducer } = routerForHapi({
it('creates a server store connector using Hapi request object', () => {
const { connect, middleware, reducer } = routerForHapi({
routes,
request: {
path: '/home',
Expand All @@ -23,7 +23,7 @@ describe('Hapi router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.pathname', '/home');
expect(state).to.have.nested.property('router.search', '?get=schwifty');
Expand Down
10 changes: 5 additions & 5 deletions test/environment/hash-router.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import routes from '../test-util/fixtures/routes';
chai.use(sinonChai);

describe('Hash router', () => {
it('creates a browser store enhancer using window.location', () => {
it('creates a browser store connector using window.location', () => {
const history = {
listen() {},
location: {
pathname: '/home',
search: '?get=schwifty'
}
};
const { enhancer, middleware, reducer } = routerForHash({
const { connect, middleware, reducer } = routerForHash({
routes,
history
});
Expand All @@ -27,7 +27,7 @@ describe('Hash router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.pathname', '/home');
expect(state).to.have.nested.property('router.search', '?get=schwifty');
Expand All @@ -45,7 +45,7 @@ describe('Hash router', () => {
}
};

const { enhancer, middleware, reducer } = routerForHash({
const { connect, middleware, reducer } = routerForHash({
routes,
history,
basename: '/cob-planet'
Expand All @@ -55,7 +55,7 @@ describe('Hash router', () => {
{},
applyMiddleware(middleware)
);
enhancer(store);
connect(store);
const state = store.getState();
expect(state).to.have.nested.property('router.basename', '/cob-planet');
expect(state).to.have.nested.property('router.pathname', '/home');
Expand Down

0 comments on commit e7badbf

Please sign in to comment.