Skip to content

Commit

Permalink
[modify]add match function to README.
Browse files Browse the repository at this point in the history
  • Loading branch information
shunta saito committed Aug 20, 2016
1 parent cdb6481 commit c26a1eb
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 61 deletions.
30 changes: 25 additions & 5 deletions README-ja.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
View framework agnostic router for redux :)
this is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.

- `virtual-dom`系のライブラリを利用した開発フローを簡単にします。
- [virtual-dom](https://github.com/Matt-Esch/virtual-dom)と使ったり
Expand All @@ -17,7 +17,7 @@ npm install router-redux --save
まず、`routerReducer`をあなたの`reducer``routing`をキーとして渡す必要があります。

```javascript
// in reducers/index.js
// In reducers/index.js
import {combineReducers} from 'redux';
import {routerReducer} from 'router-redux';

Expand All @@ -32,7 +32,7 @@ export default rootReducer;
`routerCreator`から返却された`router`をexportしておいてください。

```javascript
// in example/store.js
// In example/store.js
import routerCreator, {routerMiddleware} from 'lib/index.js';

import reducer from './reducers/index.js';
Expand Down Expand Up @@ -67,7 +67,7 @@ router.onError(({state, dispatch}) => {
router.onEnter('/', ({state}, cb) => {
console.log('[top]loading ...', state);
setTimeout(() => {
// user's navigation action will blocked untill `cb` called.
// `cb`が呼び出されるまで、ユーザのページ遷移はブロックされます。
console.log('[top]timer fired');
cb();
// `cb`をfalsyな値もしくはErrorオブジェクトを引数として呼び出した場合
Expand Down Expand Up @@ -164,6 +164,26 @@ export default rootReducer;
- routeErrorが`router.onEnter`で発生した時に呼ばれます。
- 実際のrouteErrorは`getRouteError`セレクタを利用して取得できます。

### `match`
- `math({path, anotherPath})`
- この関数を使うことで、currentPath(location)がpathにmatchするかチェックする事ができます。
- もしpathが`path parameter`を含んでいる場合、matchはマッチしたパラメータをオブジェクトとして返却します。

```javascript
import {
getCurrent,
match
} from 'router-redux';

const currentPath = getCurrent(state) && getCurrent(state).path;

// もしcurrentPath = `/`の場合
match('/', currentPath) // `{}`を返却します。

// もしcurrentPath = `/foo/1`の場合
match('/foo/:id', currentPath) // `{id: 1}`を返却します。
```

### actions
- redux向けのアクションを作ります。このアクションを利用してstore.dispatchを呼び出す必要があります。

Expand Down Expand Up @@ -227,7 +247,7 @@ jspm i
```
caddy
# open link.
# Open link.
open http://localhost:3000
```

Expand Down
132 changes: 76 additions & 56 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# router-redux [![Build Status](https://travis-ci.org/subuta/router-redux.svg?branch=master)](https://travis-ci.org/subuta/router-redux) [![Coverage Status](https://coveralls.io/repos/github/subuta/router-redux/badge.svg?branch=master)](https://coveralls.io/github/subuta/router-redux?branch=master)
View framework agnostic router for redux :)
this is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.
This is [react-router-redux](https://github.com/reactjs/react-router-redux) for your vdom-based project.

- Make your vdom-based development flow easy.
- with [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- or [snabbdom](https://github.com/paldepind/snabbdom)
- With [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
- Or [snabbdom](https://github.com/paldepind/snabbdom)
- Adds pushState/popState based client-side routing to your project.
- Light weight(around 5K) but yet powerful router for Redux.

Expand All @@ -19,22 +19,22 @@ npm install router-redux --save
First you need to pass `routerReducer` to your own `reducer` with `routing` key.

```javascript
// in reducers/index.js
// In reducers/index.js
import {combineReducers} from 'redux';
import {routerReducer} from 'router-redux';

const rootReducer = combineReducers({
routing: routerReducer // here
routing: routerReducer // HERE
});

export default rootReducer;
```

Next you need to pass `routerMiddleware` to your `createStore` function.
then create and export `router` using `routerCreator`.
Then create and export `router` using `routerCreator`.

```javascript
// in example/store.js
// In example/store.js
import routerCreator, {routerMiddleware} from 'lib/index.js';

import reducer from './reducers/index.js';
Expand All @@ -46,39 +46,39 @@ const store = createStore(reducer, compose(
export const router = routerCreator(store);
```

then `router` enables you to pushState/popState based routing with redux.
Then `router` enables you to pushState/popState based routing with redux.

```javascript
// get your exported router
// Get your exported router
import {router} from 'example/store.js';

// get router action/selector from router-redux
// Get router action/selector from router-redux
import {
push,
getCurrent
} from 'router-redux';

// register onError first (if you need to catch initialRouting error)
// Register onError first (if you need to catch initialRouting error)
router.onError(({state, dispatch}) => {
const currentPath = getCurrent(state).path; // will extract currentPath from state
// you can navigate user to error page or call any other redux action.
const currentPath = getCurrent(state).path; // Will extract currentPath from state
// You can navigate user to error page or call any other redux action.
dispatch(push('/error'));
});

// called when user entered to path(/)
// Called when user entered to path(/)
router.onEnter('/', ({state}, cb) => {
console.log('[top]loading ...', state);
setTimeout(() => {
// user's navigation action will blocked untill `cb` called.
// User's navigation action will blocked untill `cb` called.
console.log('[top]timer fired');
cb();
// if you call `cb` with falsy value or Error object,
// router-redux will emit router's onError. and stop routing to path(/).
// If you call `cb` with falsy value or Error object,
// Router-redux will emit router's onError. and stop routing to path(/).
// cb(new Error('some error in top'));
}, 1000);
});

// called when user leave from path(/)
// Called when user leave from path(/)
router.onLeave('/', (state) => {
console.log('[top]leave');
});
Expand All @@ -91,10 +91,10 @@ router.onLeave('/', (state) => {

### `routerMiddleware`
router-redux's middleware function for redux.
you need to register it in your `createStore` function.
You need to register it in your `createStore` function.

```javascript
// in store.js
// In store.js
import routerCreator, {routerMiddleware} from 'lib/index.js';

import reducer from './reducers/index.js';
Expand All @@ -108,10 +108,10 @@ export const router = routerCreator(store);

### `routerReducer()`
router-redux's reducer function for redux.
you need to register it in your `combineReducers` function.
You need to register it in your `combineReducers` function.

```javascript
// in reducers/index.js
// In reducers/index.js
import {combineReducers} from 'redux';
import {routerReducer} from 'router-redux';

Expand All @@ -123,84 +123,104 @@ export default rootReducer;
```

### `routerCreator(store)`
when you import `router-redux`, it gives you `routerCreator`,
you need to pass `store` to `routerCreator`, and it returns `router` for later use.
When you import `router-redux`, it gives you `routerCreator`,
You need to pass `store` to `routerCreator`, and it returns `router` for later use.

- `export const router = routerCreator(store)`

### `router`
will created by `routerCreator` above. You can register your own handler function to router.
Will created by `routerCreator` above. You can register your own handler function to router.

#### `router.onEnter(path, handler)`
- `path` can includes `path parameter` like (/foo/:id)
- if you specify `path parameter` to path, `router-redux` will set `route` and `params` properties in `route` object(please refer `selectors` section).
- If you specify `path parameter` to path, `router-redux` will set `route` and `params` properties in `route` object(please refer `selectors` section).
- `handler({state, dispatch}, [callback])`
- called when user navigated to `path` by pushState/popState or directly(by browser's url bar)
- handler will block routing until `callback` function is called.
(this is useful for Authentication or Load page related data via ajax)
- if you call `callback` function with falsy value(or Error object). `router-redux` will call `router.onError`
- Called when user navigated to `path` by pushState/popState or directly(by browser's url bar)
- Handler will block routing until `callback` function is called.
(This is useful for Authentication or Load page related data via ajax)
- If you call `callback` function with falsy value(or Error object). `router-redux` will call `router.onError`
and cancel navigation. (this is useful for handling un-authorized response or Server error)
- if you omit `callback` function then your onEnter result will not affect to further navigation(become asynchronous).
- if you navigate to `/foo/1` from `/`, your state.routing in `onEnter` function will looks like below.
- If you omit `callback` function then your onEnter result will not affect to further navigation(become asynchronous).
- If you navigate to `/foo/1` from `/`, your state.routing in `onEnter` function will looks like below.

| key | value |
| Key | Value |
|:-----------------------|:----------------------|
| current | current route (`/`) |
| next | next route (`/foo/1`) |
| last | previous route |

#### `router.onLeave(path, handler)`
- `handler({state, dispatch})`
- called when user navigated from `path` by pushState/popState
- if you navigate to `/foo/1` from `/`, your state.routing in `onLeave` function will looks like below.
- Called when user navigated from `path` by pushState/popState
- If you navigate to `/foo/1` from `/`, Your `state.routing` in `onLeave` function will looks like below.

| key | value |
| Key | Value |
|:-----------------------|:----------------------|
| current | current route (`/`) |
| next | `null` |
| last | previous route |

#### `router.onError(handler)`
- `handler({state, dispatch})`
- called when routeError occurred in `router.onEnter`
- you can get actual routeError using `getRouteError` selector.
- Called when routeError occurred in `router.onEnter`
- You can get actual routeError using `getRouteError` selector.

### `match`
- `math({path, anotherPath})`
- You can use this function to check currentPath(location) is matched to path.
- If your path contains `path parameter` then match will return matched params as object.

```javascript
import {
getCurrent,
match
} from 'router-redux';

const currentPath = getCurrent(state) && getCurrent(state).path;

// If currentPath = `/`
match('/', currentPath) // will return `{}`

// If currentPath = `/foo/1`
match('/foo/:id', currentPath) // will return `{id: 1}`
```

### actions
- will creates redux action. you need to call store.dispatch with this action.
- Will creates redux action. You need to call store.dispatch with this action.

#### `push(path)/replace(path)`
- create push/replace action with `path`.
- when you dispatch push/replace action. router'redux will call pushState/replaceState of [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
- Create push/replace action with `path`.
- When you dispatch push/replace action. router'redux will call pushState/replaceState of [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)

#### `go(page)/back()/forward()`
- create go/back/forward action.
- when you dispatch go/back/forward action. router'redux will call go/back/forward of [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
- Create go/back/forward action.
- When you dispatch go/back/forward action. router'redux will call go/back/forward of [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)

### selectors
- will extracts value from your state. you can use selectors with [reselect](https://github.com/reactjs/reselect) if you like.
- Will extracts value from your state. You can use selectors with [reselect](https://github.com/reactjs/reselect) if you like.
- `route` has these properties
- path(`String`): `/foo/1 // path`
- query(`String`): `sample=true // query param. you can use third-party library(https://github.com/ljharb/qs) to parse query.`
- params(`Object`): `{id: 1} // matched params(declared in onEnter)`
- route(`String`): `/foo/:id // matched route(declared in onEnter)`
- path(`String`): `/foo/1 // Path`
- query(`String`): `sample=true // Query param. you can use third-party library(https://github.com/ljharb/qs) to parse query.`
- params(`Object`): `{id: 1} // Matched params(declared in onEnter)`
- route(`String`): `/foo/:id // Matched route(declared in onEnter)`

#### `getCurrent(state)`
- extracts `current route` from `state`
- Extracts `current route` from `state`

#### `getLast(state)`
- extracts `last route` from `state`
- Extracts `last route` from `state`

#### `getNext(state)`
- extracts `next route` from `state`
- Extracts `next route` from `state`

#### `getRouteError(state)`
- extracts `routeError` from `state`
- Extracts `routeError` from `state`
- `routeError` become `true` or `Error`(truthy value) when you call onEnter handler's `callback` with falsy value or Error object.

#### `getIsInitalRouteResolved(state)`
- extracts `isInitialRouteResolved` from `state`
- Extracts `isInitialRouteResolved` from `state`
- `isInitialRouteResolved` become `true` after you call initial onEnter handler's `callback`.
- this is useful for initial page rendering(via browser's url bar navigation).
- This is useful for initial page rendering(via browser's url bar navigation).

## Development
### 1. Clone this repo
Expand All @@ -213,7 +233,7 @@ cd ./redux-virtual-dom
### 2. Install dependencies

- Caddy (Web server for Development)
- jspm@beta (for package management/build)
- jspm@beta (For package management/build)

```
brew install caddy
Expand All @@ -227,7 +247,7 @@ jspm i
```
caddy
# open link.
# Open link.
open http://localhost:3000
```

Expand Down

0 comments on commit c26a1eb

Please sign in to comment.