├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE.md
├── README.md
├── examples
├── basic
│ ├── README.md
│ ├── client.js
│ ├── common
│ │ ├── actions
│ │ │ ├── index.js
│ │ │ └── name.js
│ │ ├── components
│ │ │ ├── About
│ │ │ │ └── index.js
│ │ │ ├── Hello.js
│ │ │ ├── Hello
│ │ │ │ └── index.js
│ │ │ ├── Home
│ │ │ │ └── index.js
│ │ │ ├── Nav
│ │ │ │ └── index.js
│ │ │ ├── NotFound
│ │ │ │ └── index.js
│ │ │ └── Page
│ │ │ │ └── index.js
│ │ ├── configureStore.js
│ │ ├── reducers
│ │ │ ├── index.js
│ │ │ └── name.js
│ │ └── routes.js
│ ├── package.json
│ ├── server.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
└── real-world
│ ├── README.md
│ ├── client.js
│ ├── common
│ ├── actions
│ │ ├── areDishesLoading.js
│ │ ├── country.js
│ │ ├── dishes.js
│ │ ├── index.js
│ │ └── isVegetarian.js
│ ├── components
│ │ ├── Menu.js
│ │ ├── Menu
│ │ │ └── index.js
│ │ ├── NotFound
│ │ │ └── index.js
│ │ └── Page
│ │ │ └── index.js
│ ├── config.json
│ ├── configureStore.js
│ ├── reducers
│ │ ├── areDishesLoading.js
│ │ ├── country.js
│ │ ├── dishes.js
│ │ ├── index.js
│ │ └── isVegetarian.js
│ └── routes.js
│ ├── package.json
│ ├── server.js
│ ├── webpack.config.babel.js
│ └── yarn.lock
├── package.json
├── src
├── actions
│ ├── changePageTo.js
│ └── updateUrl.js
├── components
│ ├── Link.js
│ └── Router.js
├── constants.js
├── helpers
│ ├── getAction.js
│ ├── getLocation.js
│ ├── getRoute.js
│ ├── getState.js
│ ├── popStateListener.js
│ └── resolveActionCreator.js
├── index.js
├── middleware
│ └── router.js
└── reducers
│ ├── router.js
│ └── url.js
├── test
├── actions
│ ├── changePageTo.js
│ └── updateUrl.js
├── components
│ ├── Link.js
│ └── Router.js
├── helpers
│ ├── getAction.js
│ ├── getLocation.js
│ ├── getRoute.js
│ ├── getState.js
│ └── resolveActionCreator.js
├── middleware
│ └── router.js
└── reducers
│ ├── router.js
│ └── url.js
├── webpack.config.babel.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | examples/*/client.dist.js
3 | examples/*/client.dist.js.map
4 | examples/*/universal-redux-router/
5 | lib/
6 | node_modules/
7 | npm-debug.log
8 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .gitignore
2 | .travis.yml
3 | examples/
4 | src/
5 | test/
6 | webpack.config.js
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | cache:
4 | directories:
5 | - node_modules
6 | notifications:
7 | email: false
8 | node_js:
9 | - '6'
10 | before_install:
11 | - npm i -g npm@^3.8.0
12 | before_script:
13 | - npm prune
14 | script:
15 | - npm run lint
16 | - npm test
17 | after_success:
18 | - npm run semantic-release
19 | branches:
20 | except:
21 | - "/^v\\d+\\.\\d+\\.\\d+$/"
22 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Internet Systems Consortium license
2 | ===================================
3 |
4 | Copyright (c) `2016`, `Colin Meinke`
5 |
6 | Permission to use, copy, modify, and/or distribute this software for any purpose
7 | with or without fee is hereby granted, provided that the above copyright notice
8 | and this permission notice appear in all copies.
9 |
10 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
11 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
12 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
13 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
14 | OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
15 | TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
16 | THIS SOFTWARE.
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Universal Redux Router
2 |
3 | A router that turns URL params into first-class Redux state
4 | and runs action creators on navigation.
5 |
6 | ---
7 |
8 | 
9 | 
10 |
11 | ## Navigation
12 |
13 | - [Motivation](#motivation)
14 | - [Features](#features)
15 | - [Extracts state from URLs](#extracts-state-from-urls)
16 | - [Runs action creators *after* calculating new state](#runs-action-creators-after-calculating-new-state)
17 | - [Handles async action creators](#handles-async-action-creators)
18 | - [Routing on server and client](#routing-on-server-and-client)
19 | - [Examples](#examples)
20 | - [Installation](#installation)
21 | - [Usage](#usage)
22 | - [Router](#router)
23 | - [routerMiddleware](#routermiddleware)
24 | - [routerReducer](#routerreducer)
25 | - [changePageTo](#changepageto)
26 | - [Link](#link)
27 | - [getState](#getstate)
28 | - [Help make this better](#help-make-this-better)
29 | - [Thanks](#thanks)
30 | - [License](#license)
31 |
32 | ## Motivation
33 |
34 | If you're a good web citizen each part of your app can be
35 | linked to with a URL. These URLs often contain state either
36 | as part of the path name or within the query string.
37 |
38 | ```
39 | /users/782/posts?page=2&tags[]=coding,making
40 | ```
41 |
42 | In the above example, we have the following state:
43 |
44 | ```js
45 | {
46 | id: 782,
47 | page: 2,
48 | tags: [ 'coding', 'making' ]
49 | }
50 | ```
51 |
52 | **I want that state in my Redux store!**
53 |
54 | ## Features
55 |
56 | ### Extracts state from URLs
57 |
58 | Universal Redux Router extracts state from a URL and adds it
59 | as first-class state to your Redux store.
60 |
61 | It achieves this by allowing you to attach Redux action
62 | creators to your routes.
63 |
64 | ```js
65 | const routes = [
66 | [
67 | 'users/:id/posts',
68 | {
69 | id: updateId,
70 | page: updatePage,
71 | tags: updateTags
72 | },
73 | /posts`. It has three Redux action
80 | creators attached `updateId`, `updatePage` and `updateTags`.
81 |
82 | When a user navigates to a URL, the action creators associated
83 | with the matching route are called with the appropriate part
84 | of the URL.
85 |
86 | For example, navigating to
87 | `/users/782/posts?page=2&tags[]=coding,making` will result in
88 | the following function calls:
89 |
90 | - `updateId('782')`
91 | - `updatePage('2')`
92 | - `updateTags([ 'coding', 'making' ])`
93 |
94 | The returned actions are then used to calculate the new state
95 | of the Redux store.
96 |
97 | ### Runs action creators *after* calculating new state
98 |
99 | On top of running action creators to extract state from URL
100 | params, Universal Redux Router allows you to define action
101 | creators to run *after* the new state has been calculated.
102 |
103 | ```js
104 | const routes = [
105 | [
106 | 'users/:id/posts',
107 | {
108 | id: updateId,
109 | page: updatePage,
110 | tags: updateTags,
111 | after: [ postsUpdating, getPosts, postsUpdated ]
112 | },
113 |
176 |
178 | )
179 | ```
180 |
181 | ### routerMiddleware
182 |
183 | You must use `routerMiddleware` in your Redux middleware
184 | stack. This listens for the `CHANGE_PAGE_TO` action, matches a
185 | route and then makes a list of additional actions we need to
186 | dispatch.
187 |
188 | It also includes a few conveniences like updating scroll
189 | position on navigation and handling browser history.
190 |
191 | ```js
192 | import { routerMiddleware } from 'universal-redux-router'
193 |
194 | const middleware = applyMiddleware(routerMiddleware(routes))
195 |
196 | return createStore(reducer, state, middleware)
197 | ```
198 |
199 | ### routerReducer
200 |
201 | Instead of using Redux's `combineReducers` to create your
202 | root reducer, you must use `routerReducer`. It has the same
203 | API as `combineReducers`.
204 |
205 | `routerReducer` uses `combineReducers` under the hood for all
206 | incoming actions apart from `CHANGE_PAGE_TO`. When it receives
207 | `CHANGE_PAGE_TO` it iterates over the list of associated
208 | actions to calculate state.
209 |
210 | ```js
211 | import { routerReducer } from 'universal-redux-router'
212 |
213 | const reducer = routerReducer(reducers)
214 | ```
215 |
216 | ### changePageTo
217 |
218 | The `changePageTo` Redux action creator creates the
219 | `CHANGE_PAGE_TO` action. It is how we navigate using Universal
220 | Redux Router.
221 |
222 | It can either take an array of data, or a URL string.
223 |
224 | ```js
225 | import { changePageTo } from 'universal-redux-router'
226 |
227 | store.dispatch(
228 | changePageTo([ 'users', id, 'posts', { page, tags } ])
229 | )
230 |
231 | store.dispatch(
232 | changePageTo(`/users/${id}/string?page=${page}&tags[]=${tags.join(',')}`)
233 | )
234 | ```
235 |
236 | ### Link
237 |
238 | The `Link` component is used to create an HTML anchor element
239 | that has `changePageTo` handling built in. This means you
240 | don't have to worry about `onClick` events or having to
241 | directly call `changePageTo`.
242 |
243 | Like `changePageTo` it accepts both an array of data or a URL
244 | string as its `to` prop.
245 |
246 | ```js
247 | import { Link } from 'universal-redux-router'
248 |
249 |
16 | ,
18 | document.querySelector('.app')
19 | )
20 | }).catch(console.error.bind(console))
21 |
--------------------------------------------------------------------------------
/examples/basic/common/actions/index.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_NAME, updateName } from './name'
2 |
3 | export { UPDATE_NAME, updateName }
4 |
--------------------------------------------------------------------------------
/examples/basic/common/actions/name.js:
--------------------------------------------------------------------------------
1 | const UPDATE_NAME = 'UPDATE_NAME'
2 |
3 | const updateName = name => ({ type: UPDATE_NAME, name })
4 |
5 | export { UPDATE_NAME, updateName }
6 |
--------------------------------------------------------------------------------
/examples/basic/common/components/About/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Nav from '../Nav'
3 |
4 | const About = () => (
5 |
6 |
About page
7 |
6 |
Hello { name }
7 |
6 |
Home page
7 |
8 |
14 | )
15 |
16 | export default Nav
17 |
--------------------------------------------------------------------------------
/examples/basic/common/components/NotFound/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Nav from '../Nav'
3 |
4 | const NotFound = () => (
5 |
6 |
Not found
7 | Universal Redux Router example
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 |
24 | export default Page
25 |
--------------------------------------------------------------------------------
/examples/basic/common/configureStore.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, createStore } from 'redux'
2 | import { getState, routerMiddleware, routerReducer } from '../universal-redux-router'
3 |
4 | import * as reducers from './reducers'
5 | import routes from './routes'
6 |
7 | const reducer = routerReducer(reducers)
8 |
9 | const configureStore = ({ isServer = false, url = '/' } = {}) => new Promise((resolve, reject) => {
10 | getState(url, routes, reducer).then(state => {
11 | const middleware = applyMiddleware(
12 | routerMiddleware(routes, { isServer })
13 | )
14 |
15 | resolve(createStore(reducer, state, middleware))
16 | }).catch(reject)
17 | })
18 |
19 | export default configureStore
20 |
--------------------------------------------------------------------------------
/examples/basic/common/reducers/index.js:
--------------------------------------------------------------------------------
1 | import name from './name'
2 |
3 | export { name }
4 |
--------------------------------------------------------------------------------
/examples/basic/common/reducers/name.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_NAME } from '../actions'
2 |
3 | const name = (state = '', action) => {
4 | switch (action.type) {
5 | case UPDATE_NAME:
6 | return action.name
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export default name
13 |
--------------------------------------------------------------------------------
/examples/basic/common/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import { updateName } from './actions/name'
4 |
5 | import About from './components/About'
6 | import Hello from './components/Hello'
7 | import Home from './components/Home'
8 | import NotFound from './components/NotFound'
9 |
10 | const routes = [
11 | [ 'about',
21 |
23 | )
24 | ))
25 | }).catch(console.error.bind(console))
26 | }
27 |
28 | const renderFullPage = (app) => {
29 | return '' +
30 | renderToStaticMarkup(
16 | ,
18 | document.querySelector('.app')
19 | )
20 | }).catch(console.error.bind(console))
21 |
--------------------------------------------------------------------------------
/examples/real-world/common/actions/areDishesLoading.js:
--------------------------------------------------------------------------------
1 | const DISHES_LOADED = 'DISHES_LOADED'
2 | const DISHES_LOADING = 'DISHES_LOADING'
3 |
4 | const dishesLoaded = () => ({ type: DISHES_LOADED })
5 |
6 | const dishesLoading = () => ({ type: DISHES_LOADING })
7 |
8 | export { DISHES_LOADED, DISHES_LOADING, dishesLoaded, dishesLoading }
9 |
--------------------------------------------------------------------------------
/examples/real-world/common/actions/country.js:
--------------------------------------------------------------------------------
1 | import { countries } from '../config'
2 |
3 | const UPDATE_COUNTRY = 'UPDATE_COUNTRY'
4 |
5 | const updateCountry = (country = countries[ 0 ]) => ({ type: UPDATE_COUNTRY, country })
6 |
7 | export { UPDATE_COUNTRY, updateCountry }
8 |
--------------------------------------------------------------------------------
/examples/real-world/common/actions/dishes.js:
--------------------------------------------------------------------------------
1 | /* global fetch */
2 |
3 | import 'isomorphic-fetch'
4 |
5 | import getLocation from '../../universal-redux-router/helpers/getLocation'
6 |
7 | const UPDATE_DISHES = 'UPDATE_DISHES'
8 |
9 | const getDishes = ({ country, isVegetarian }) => new Promise((resolve, reject) => {
10 | const to = [ 'api/dishes', { country, isVegetarian } ]
11 | const { url } = getLocation(to)
12 |
13 | fetch(`http://localhost:3000${url}`, {
14 | method: 'GET'
15 | }).then(response => {
16 | return response.json()
17 | }).then(({ dishes }) => {
18 | resolve({ type: UPDATE_DISHES, dishes })
19 | }).catch(error => {
20 | reject(error)
21 | })
22 | })
23 |
24 | export { UPDATE_DISHES, getDishes }
25 |
--------------------------------------------------------------------------------
/examples/real-world/common/actions/index.js:
--------------------------------------------------------------------------------
1 | import { DISHES_LOADED, DISHES_LOADING, dishesLoaded, dishesLoading } from './areDishesLoading'
2 | import { UPDATE_COUNTRY, updateCountry } from './country'
3 | import { UPDATE_DISHES, getDishes } from './dishes'
4 | import { UPDATE_IS_VEGETARIAN, updateIsVegetarian } from './isVegetarian'
5 |
6 | export {
7 | DISHES_LOADED,
8 | DISHES_LOADING,
9 | UPDATE_COUNTRY,
10 | UPDATE_DISHES,
11 | UPDATE_IS_VEGETARIAN,
12 | dishesLoaded,
13 | dishesLoading,
14 | getDishes,
15 | updateCountry,
16 | updateIsVegetarian
17 | }
18 |
--------------------------------------------------------------------------------
/examples/real-world/common/actions/isVegetarian.js:
--------------------------------------------------------------------------------
1 | const UPDATE_IS_VEGETARIAN = 'UPDATE_IS_VEGETARIAN'
2 |
3 | const updateIsVegetarian = (isVegetarian = false) => ({
4 | isVegetarian,
5 | type: UPDATE_IS_VEGETARIAN
6 | })
7 |
8 | export { UPDATE_IS_VEGETARIAN, updateIsVegetarian }
9 |
--------------------------------------------------------------------------------
/examples/real-world/common/components/Menu.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 |
3 | import Menu from './Menu/index'
4 |
5 | const mapStateToProps = ({ areDishesLoading, country, dishes, isVegetarian }) => ({
6 | areDishesLoading,
7 | country,
8 | dishes,
9 | isVegetarian
10 | })
11 |
12 | export default connect(mapStateToProps, null)(Menu)
13 |
--------------------------------------------------------------------------------
/examples/real-world/common/components/Menu/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { changePageTo, Link } from '../../../universal-redux-router'
3 | import getLocation from '../../../universal-redux-router/helpers/getLocation'
4 |
5 | import { countries } from '../../config'
6 |
7 | const Menu = ({ areDishesLoading, country, dishes, dispatch, isVegetarian }) => (
8 |
9 |
Dishes by country:
10 |
11 | { countries.map((c, i) => (
12 |
13 |
23 | ))}
24 |
25 |
49 |
Dishes:
50 | { areDishesLoading ?
loading ...
: (
51 |
52 | { dishes.map(({ name }, i) => (
53 |
54 | { name }
55 |
56 | ))}
57 |
58 | )}
59 |
6 |
Not found
7 |
9 | Please go to the menu page
10 |
11 |
12 |
13 | )
14 |
15 | export default NotFound
16 |
--------------------------------------------------------------------------------
/examples/real-world/common/components/Page/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | const Page = ({ app }) => {
4 | return (
5 |
6 |
7 | Universal Redux Router example
9 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | )
22 | }
23 |
24 | export default Page
25 |
--------------------------------------------------------------------------------
/examples/real-world/common/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "countries": [
3 | "japan",
4 | "mexico",
5 | "vietnam"
6 | ],
7 | "dishes": [
8 | {
9 | "country": "japan",
10 | "isVegetarian": true,
11 | "name": "Okonomiyaki"
12 | },
13 | {
14 | "country": "japan",
15 | "isVegetarian": false,
16 | "name": "Tonkotsu Ramen"
17 | },
18 | {
19 | "country": "japan",
20 | "isVegetarian": true,
21 | "name": "Tempura Udon"
22 | },
23 | {
24 | "country": "japan",
25 | "isVegetarian": true,
26 | "name": "Onigiri"
27 | },
28 | {
29 | "country": "mexico",
30 | "isVegetarian": true,
31 | "name": "Gorditas con Nopal"
32 | },
33 | {
34 | "country": "mexico",
35 | "isVegetarian": false,
36 | "name": "Tacos de Camarón"
37 | },
38 | {
39 | "country": "mexico",
40 | "isVegetarian": true,
41 | "name": "Huevos Rancheros"
42 | },
43 | {
44 | "country": "mexico",
45 | "isVegetarian": false,
46 | "name": "Cochinita Pibil"
47 | },
48 | {
49 | "country": "vietnam",
50 | "isVegetarian": false,
51 | "name": "Bún Bò Huế"
52 | },
53 | {
54 | "country": "vietnam",
55 | "isVegetarian": false,
56 | "name": "Bún Riêu"
57 | },
58 | {
59 | "country": "vietnam",
60 | "isVegetarian": false,
61 | "name": "Phở"
62 | },
63 | {
64 | "country": "vietnam",
65 | "isVegetarian": true,
66 | "name": "Gỏi Cuốn"
67 | }
68 | ]
69 | }
70 |
--------------------------------------------------------------------------------
/examples/real-world/common/configureStore.js:
--------------------------------------------------------------------------------
1 | import { applyMiddleware, createStore } from 'redux'
2 | import { getState, routerMiddleware, routerReducer } from '../universal-redux-router'
3 |
4 | import * as reducers from './reducers'
5 | import routes from './routes'
6 |
7 | const reducer = routerReducer(reducers)
8 |
9 | const configureStore = ({ isServer = false, url = '/' } = {}) => new Promise((resolve, reject) => {
10 | getState(url, routes, reducer).then(state => {
11 | const middleware = applyMiddleware(
12 | routerMiddleware(routes, { isServer })
13 | )
14 |
15 | resolve(createStore(reducer, state, middleware))
16 | }).catch(reject)
17 | })
18 |
19 | export default configureStore
20 |
--------------------------------------------------------------------------------
/examples/real-world/common/reducers/areDishesLoading.js:
--------------------------------------------------------------------------------
1 | import { DISHES_LOADED, DISHES_LOADING } from '../actions'
2 |
3 | const areDishesLoading = (state = false, action) => {
4 | switch (action.type) {
5 | case DISHES_LOADED:
6 | return false
7 | case DISHES_LOADING:
8 | return true
9 | default:
10 | return state
11 | }
12 | }
13 |
14 | export default areDishesLoading
15 |
--------------------------------------------------------------------------------
/examples/real-world/common/reducers/country.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_COUNTRY } from '../actions'
2 |
3 | import { countries } from '../config'
4 |
5 | const country = (state = countries[ 0 ], action) => {
6 | switch (action.type) {
7 | case UPDATE_COUNTRY:
8 | return action.country
9 | default:
10 | return state
11 | }
12 | }
13 |
14 | export default country
15 |
--------------------------------------------------------------------------------
/examples/real-world/common/reducers/dishes.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_DISHES } from '../actions'
2 |
3 | const dishes = (state = [], action) => {
4 | switch (action.type) {
5 | case UPDATE_DISHES:
6 | return action.dishes
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export default dishes
13 |
--------------------------------------------------------------------------------
/examples/real-world/common/reducers/index.js:
--------------------------------------------------------------------------------
1 | import areDishesLoading from './areDishesLoading'
2 | import country from './country'
3 | import dishes from './dishes'
4 | import isVegetarian from './isVegetarian'
5 |
6 | export { areDishesLoading, country, dishes, isVegetarian }
7 |
--------------------------------------------------------------------------------
/examples/real-world/common/reducers/isVegetarian.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_IS_VEGETARIAN } from '../actions'
2 |
3 | const isVegetarian = (state = false, action) => {
4 | switch (action.type) {
5 | case UPDATE_IS_VEGETARIAN:
6 | return action.isVegetarian
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export default isVegetarian
13 |
--------------------------------------------------------------------------------
/examples/real-world/common/routes.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import {
4 | dishesLoaded,
5 | dishesLoading,
6 | getDishes,
7 | updateCountry,
8 | updateIsVegetarian
9 | } from './actions'
10 |
11 | import Menu from './components/Menu'
12 | import NotFound from './components/NotFound'
13 |
14 | const routes = [
15 | [
16 | 'menu/:country',
17 | {
18 | country: updateCountry,
19 | isVegetarian: updateIsVegetarian,
20 | after: [ dishesLoading, getDishes, dishesLoaded ]
21 | },
22 | // eslint-disable-next-line react/jsx-indent
23 |
36 |
38 | )
39 | ))
40 | }).catch(console.error.bind(console))
41 | }
42 |
43 | const renderFullPage = (app) => {
44 | return '' +
45 | renderToStaticMarkup(
28 | { children }
29 |
30 | )
31 | }
32 |
33 | Link.defaultProps = defaultProps
34 | Link.propTypes = propTypes
35 |
36 | const LinkContainer = connect()(Link)
37 |
38 | export { Link }
39 | export default LinkContainer
40 |
--------------------------------------------------------------------------------
/src/components/Router.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux'
2 |
3 | import getRoute from '../helpers/getRoute'
4 |
5 | const Router = ({ routes, url }) => getRoute(url, routes).component
6 |
7 | const mapStateToProps = ({ url }) => ({ url })
8 |
9 | const RouterContainer = connect(mapStateToProps)(Router)
10 |
11 | export { Router }
12 | export default RouterContainer
13 |
--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
1 | const AFTER_CHANGE_PAGE_TO = '@@universalReduxRouter/AFTER_CHANGE_PAGE_TO'
2 | const CHANGE_PAGE_TO = '@@universalReduxRouter/CHANGE_PAGE_TO'
3 | const UPDATE_URL = '@@universalReduxRouter/UPDATE_URL'
4 |
5 | export { AFTER_CHANGE_PAGE_TO, CHANGE_PAGE_TO, UPDATE_URL }
6 |
--------------------------------------------------------------------------------
/src/helpers/getAction.js:
--------------------------------------------------------------------------------
1 | import getLocation from './getLocation'
2 | import getRoute from './getRoute'
3 | import updateUrl from '../actions/updateUrl'
4 | import { CHANGE_PAGE_TO } from '../constants'
5 | import { getResolvedActionCreators } from './resolveActionCreator'
6 |
7 | const getActions = (url, actionCreators, data) => new Promise((resolve, reject) => {
8 | const actionCreatorsMap = new Map()
9 |
10 | actionCreatorsMap.set(updateUrl, url)
11 |
12 | Object.keys(actionCreators).forEach(k => {
13 | if (k !== 'after') {
14 | if (Array.isArray(actionCreators[ k ])) {
15 | actionCreators[ k ].forEach(actionCreator => {
16 | actionCreatorsMap.set(actionCreator, data[ k ])
17 | })
18 | } else {
19 | actionCreatorsMap.set(actionCreators[ k ], data[ k ])
20 | }
21 | }
22 | })
23 |
24 | Promise.all(getResolvedActionCreators(actionCreatorsMap))
25 | .then(resolve)
26 | .catch(reject)
27 | })
28 |
29 | const getAfter = actionCreators => {
30 | const after = []
31 |
32 | if (actionCreators.after) {
33 | if (Array.isArray(actionCreators.after)) {
34 | actionCreators.after.forEach(actionCreator => {
35 | after.push(actionCreator)
36 | })
37 | } else {
38 | after.push(actionCreators.after)
39 | }
40 | }
41 |
42 | return after
43 | }
44 |
45 | const getAction = (to, routes) => new Promise((resolve, reject) => {
46 | const { query, url } = getLocation(to)
47 | const { actionCreators, params } = getRoute(url, routes)
48 |
49 | getActions(url, actionCreators, { ...query, ...params })
50 | .then(actions => resolve({
51 | actions,
52 | after: getAfter(actionCreators),
53 | type: CHANGE_PAGE_TO,
54 | url
55 | }))
56 | .catch(reject)
57 | })
58 |
59 | export default getAction
60 |
--------------------------------------------------------------------------------
/src/helpers/getLocation.js:
--------------------------------------------------------------------------------
1 | const encodeMapping = new Map([
2 | [ '%', '%25' ],
3 | [ '/', '%2F' ],
4 | [ '?', '%3F' ],
5 | [ '=', '%3D' ],
6 | [ '&', '%26' ],
7 | [ '#', '%23' ],
8 | [ ':', '%3A' ],
9 | [ '<', '%3C' ],
10 | [ '>', '%3E' ],
11 | [ '[', '%5B' ],
12 | [ ']', '%5D' ],
13 | [ '{', '%7B' ],
14 | [ '}', '%7D' ],
15 | [ '|', '%7C' ],
16 | [ '\\', '%5C' ],
17 | [ '^', '%5E' ],
18 | [ '~', '%7E' ],
19 | [ '`', '%60' ],
20 | [ '"', '%22' ],
21 | [ ' ', '+' ]
22 | ])
23 |
24 | const decode = value => (
25 | [ ...encodeMapping.entries() ].reduce((str, [ k, v ]) => (
26 | str.split(v).join(k)
27 | ), value.toString())
28 | )
29 |
30 | const encode = value => (
31 | [ ...encodeMapping.entries() ].reduce((str, [ k, v ]) => (
32 | str.split(k).join(v)
33 | ), value.toString())
34 | )
35 |
36 | const getValue = value => {
37 | if ([ 'true', 'false' ].indexOf(value) !== -1) {
38 | return value === 'true'
39 | }
40 |
41 | return decode(value)
42 | }
43 |
44 | const parseQueryString = queryString => {
45 | const query = {}
46 | const queryParts = queryString.split('&')
47 |
48 | queryParts.forEach(part => {
49 | const [ key, value ] = part.split('=')
50 |
51 | const isArray = key.includes('%5B%5D')
52 | const isObject = key.match(/%5B(.)*%5D/)
53 |
54 | if (isArray) {
55 | const rootKey = key.replace('%5B%5D', '')
56 |
57 | if (query.hasOwnProperty(rootKey)) {
58 | value.split(/[,]+/).forEach(v => {
59 | query[ rootKey ].push(getValue(v))
60 | })
61 | } else {
62 | query[ rootKey ] = value.split(/[,]+/).map(getValue)
63 | }
64 | } else if (isObject) {
65 | const rootKey = key.replace(/%5B(.*)%5D/, '')
66 | const objectKey = key.match(/%5B(.*)%5D/).pop()
67 |
68 | if (!query.hasOwnProperty(rootKey)) {
69 | query[ rootKey ] = {}
70 | }
71 |
72 | query[ rootKey ][ objectKey ] = getValue(value)
73 | } else {
74 | query[ key ] = getValue(value)
75 | }
76 | })
77 |
78 | return query
79 | }
80 |
81 | const getQuery = to => {
82 | const isArray = Array.isArray(to) && to.length > 1
83 |
84 | if (isArray) {
85 | for (const part of to) {
86 | if (typeof part === 'object') {
87 | return part
88 | }
89 | }
90 | } else {
91 | const url = to.toString().replace(/\?$/, '')
92 |
93 | if (url.includes('?')) {
94 | const [ , queryString ] = url.split('?')
95 | return parseQueryString(queryString)
96 | }
97 | }
98 |
99 | return {}
100 | }
101 |
102 | const getQueryString = query => {
103 | const queryKeys = Object.keys(query)
104 |
105 | if (queryKeys.length) {
106 | const parts = queryKeys.map(k => {
107 | const isArray = Array.isArray(query[ k ])
108 | const isObject = typeof query[ k ] === 'object'
109 |
110 | if (isArray) {
111 | if (query[ k ].length) {
112 | const key = encode(`${k}[]`)
113 | const value = encode(query[ k ].join(','))
114 | return `${key}=${value}`
115 | }
116 | } else if (isObject) {
117 | const objParts = Object.keys(query[ k ]).map(objKey => {
118 | const key = encode(`${k}[${objKey}]`)
119 | const value = encode(query[ k ][ objKey ])
120 |
121 | if (value.length) {
122 | return `${key}=${value}`
123 | }
124 |
125 | return null
126 | }).filter(part => part !== null)
127 |
128 | return objParts.length ? `${objParts.join('&')}` : null
129 | } else {
130 | const key = encode(`${k}`)
131 | const value = encode(query[ k ])
132 |
133 | if (value.length) {
134 | return `${key}=${value}`
135 | }
136 | }
137 |
138 | return null
139 | }).filter(part => part !== null)
140 |
141 | return parts.length ? `?${parts.join('&')}` : ''
142 | }
143 |
144 | return ''
145 | }
146 |
147 | const getPathName = to => {
148 | const isArray = Array.isArray(to) && to.length > 1
149 |
150 | if (isArray) {
151 | const pathNameParts = []
152 |
153 | to.forEach(part => {
154 | if ([ 'array', 'object' ].indexOf(typeof part) === -1) {
155 | pathNameParts.push(
156 | part.toString().replace(/(^\/|\/$)/, '')
157 | )
158 | }
159 | })
160 |
161 | return `/${pathNameParts.join('/')}`
162 | }
163 |
164 | const url = to.toString()
165 | const [ pathName ] = url.split('?')
166 | return `/${pathName.replace(/(^\/|\/$)/, '')}`
167 | }
168 |
169 | const getLocation = to => {
170 | const pathName = getPathName(to)
171 | const query = getQuery(to)
172 | const queryString = getQueryString(query)
173 | const url = pathName + queryString
174 |
175 | return { pathName, query, queryString, url }
176 | }
177 |
178 | export { getPathName, getQuery, getQueryString }
179 |
180 | export default getLocation
181 |
--------------------------------------------------------------------------------
/src/helpers/getRoute.js:
--------------------------------------------------------------------------------
1 | const match = (pathName, routePath) => {
2 | const keys = routePath.replace(/(^\/|\/$)/, '').split('/')
3 | const values = pathName.replace(/(^\/|\/$)/, '').split('/')
4 |
5 | let i = 0
6 | let k
7 |
8 | for (k of keys) {
9 | if ((k !== '*') && (!k.startsWith(':'))) {
10 | if (k !== values[ i ]) {
11 | return false
12 | }
13 | }
14 |
15 | i++
16 | }
17 |
18 | if (values[ i ] && k !== '*') {
19 | return false
20 | }
21 |
22 | return true
23 | }
24 |
25 | const getActionCreators = route => {
26 | const actionCreators = {}
27 |
28 | for (const part of route) {
29 | if (typeof part === 'object' && !part.props) {
30 | Object.assign(actionCreators, part)
31 | }
32 | }
33 |
34 | return actionCreators
35 | }
36 |
37 | const getComponent = route => route[ route.length - 1 ]
38 |
39 | const getParams = (routePath, pathName) => {
40 | const params = {}
41 | const keys = routePath.split('/')
42 | const values = pathName.split('/')
43 |
44 | keys.forEach((k, i) => {
45 | if (k.startsWith(':') && values[ i ]) {
46 | params[ k.substr(1) ] = values[ i ]
47 | }
48 | })
49 |
50 | return params
51 | }
52 |
53 | const getRoute = (url, routes) => {
54 | const pathName = `/${url.split('?')[ 0 ].replace(/(^\/|\/$)/, '')}`
55 |
56 | for (const route of routes) {
57 | const routePath = `/${route
58 | .filter(part => [ 'object', 'array' ].indexOf(typeof part) === -1)
59 | .map(part => part.replace(/(^\/|\/$)/, ''))
60 | .join('/')
61 | }`
62 |
63 | if (match(pathName, routePath)) {
64 | return {
65 | actionCreators: getActionCreators(route),
66 | component: getComponent(route),
67 | params: getParams(routePath, pathName)
68 | }
69 | }
70 | }
71 |
72 | return null
73 | }
74 |
75 | export { match, getActionCreators, getComponent, getParams }
76 |
77 | export default getRoute
78 |
--------------------------------------------------------------------------------
/src/helpers/getState.js:
--------------------------------------------------------------------------------
1 | import getAction from './getAction'
2 | import { resolveActionCreator } from './resolveActionCreator'
3 |
4 | const getState = (url, routes, reducer, initialState = {}) => new Promise((resolve, reject) => {
5 | // eslint-disable-next-line promise/param-names
6 | const actionCreatorsReducer = (state, actionCreators) => new Promise((res, rej) => {
7 | if (actionCreators.length) {
8 | const actionCreator = actionCreators.shift()
9 |
10 | resolveActionCreator(actionCreator, state)
11 | .then(action => {
12 | actionCreatorsReducer(reducer(state, action), actionCreators)
13 | .then(res)
14 | .catch(rej)
15 | })
16 | .catch(rej)
17 | } else {
18 | resolve(state)
19 | }
20 | })
21 |
22 | getAction(url, routes).then(action => {
23 | const state = reducer(initialState, action)
24 |
25 | if (action.after.length) {
26 | actionCreatorsReducer(state, action.after)
27 | .then(resolve)
28 | .catch(reject)
29 | } else {
30 | resolve(state)
31 | }
32 | }).catch(reject)
33 | })
34 |
35 | export default getState
36 |
--------------------------------------------------------------------------------
/src/helpers/popStateListener.js:
--------------------------------------------------------------------------------
1 | import changePageTo from '../actions/changePageTo'
2 |
3 | const popStateListener = dispatch => (
4 | window.addEventListener('popstate', () => {
5 | const { hash, pathname, search } = window.location
6 | const url = pathname + search + hash
7 |
8 | dispatch(changePageTo(url, {
9 | shouldAddToHistory: false
10 | }))
11 | })
12 | )
13 |
14 | export default popStateListener
15 |
--------------------------------------------------------------------------------
/src/helpers/resolveActionCreator.js:
--------------------------------------------------------------------------------
1 | const resolveActionCreator = (actionCreator, data) => Promise.resolve(
2 | actionCreator(data)
3 | )
4 |
5 | const getResolvedActionCreators = actionCreatorsMap => {
6 | const resolved = []
7 |
8 | actionCreatorsMap.forEach((data, actionCreator) => {
9 | resolved.push(resolveActionCreator(actionCreator, data))
10 | })
11 |
12 | return resolved
13 | }
14 |
15 | export { resolveActionCreator, getResolvedActionCreators }
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import changePageTo from './actions/changePageTo'
2 | import getState from './helpers/getState'
3 | import Link from './components/Link'
4 | import Router from './components/Router'
5 | import routerMiddleware from './middleware/router'
6 | import routerReducer from './reducers/router'
7 |
8 | export {
9 | changePageTo,
10 | getState,
11 | Link,
12 | Router,
13 | routerMiddleware,
14 | routerReducer
15 | }
16 |
--------------------------------------------------------------------------------
/src/middleware/router.js:
--------------------------------------------------------------------------------
1 | import getAction from '../helpers/getAction'
2 | import popStateListener from '../helpers/popStateListener'
3 | import { AFTER_CHANGE_PAGE_TO, CHANGE_PAGE_TO } from '../constants'
4 | import { resolveActionCreator } from '../helpers/resolveActionCreator'
5 |
6 | const getAfterAction = a => {
7 | const after = [ ...a ]
8 | const actionCreator = after.shift()
9 | return { actionCreator, after, type: AFTER_CHANGE_PAGE_TO }
10 | }
11 |
12 | const scrollToTop = () => {
13 | document.documentElement.scrollTop = document.body.scrollTop = 0
14 | }
15 |
16 | const router = (routes, { isServer = false } = {}) => ({ dispatch, getState }) => {
17 | if (!isServer) {
18 | popStateListener(dispatch)
19 | }
20 |
21 | return next => action => {
22 | if (action.type === CHANGE_PAGE_TO) {
23 | const { options: { shouldAddToHistory, shouldScrollToTop }, to } = action
24 |
25 | return getAction(to, routes).then(newAction => {
26 | if (!isServer && shouldAddToHistory) {
27 | window.history.pushState({}, '', newAction.url)
28 | }
29 |
30 | if (shouldScrollToTop) {
31 | scrollToTop()
32 | }
33 |
34 | const result = next(newAction)
35 |
36 | if (newAction.after.length) {
37 | dispatch(getAfterAction(newAction.after))
38 | }
39 |
40 | return result
41 | }).catch(console.error)
42 | } else if (action.type === AFTER_CHANGE_PAGE_TO) {
43 | return resolveActionCreator(action.actionCreator, getState()).then(newAction => {
44 | const result = next(newAction)
45 |
46 | if (action.after.length) {
47 | dispatch(getAfterAction(action.after))
48 | }
49 |
50 | return result
51 | }).catch(console.error)
52 | }
53 |
54 | return next(action)
55 | }
56 | }
57 |
58 | export default router
59 |
--------------------------------------------------------------------------------
/src/reducers/router.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux'
2 |
3 | import url from './url'
4 | import { CHANGE_PAGE_TO } from '../constants'
5 |
6 | const router = reducers => {
7 | const rootReducer = combineReducers({ ...reducers, url })
8 |
9 | const batchReducer = (state, action) => {
10 | switch (action.type) {
11 | case CHANGE_PAGE_TO:
12 | return action.actions.reduce(rootReducer, state)
13 | default:
14 | return rootReducer(state, action)
15 | }
16 | }
17 |
18 | return batchReducer
19 | }
20 |
21 | export default router
22 |
--------------------------------------------------------------------------------
/src/reducers/url.js:
--------------------------------------------------------------------------------
1 | import { UPDATE_URL } from '../constants'
2 |
3 | const url = (state = '/', action = {}) => {
4 | switch (action.type) {
5 | case UPDATE_URL:
6 | return action.url
7 | default:
8 | return state
9 | }
10 | }
11 |
12 | export default url
13 |
--------------------------------------------------------------------------------
/test/actions/changePageTo.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import changePageTo from '../../src/actions/changePageTo'
6 | import { CHANGE_PAGE_TO } from '../../src/constants'
7 |
8 | describe('action creator', () => {
9 | describe('changePageTo()', () => {
10 | it('should create an action to change page', () => {
11 | const options = {
12 | shouldAddToHistory: false,
13 | shouldScrollToTop: false
14 | }
15 |
16 | const to = '/hello-world'
17 |
18 | const expectedAction = {
19 | options,
20 | to,
21 | type: CHANGE_PAGE_TO
22 | }
23 |
24 | expect(changePageTo(to, options)).toEqual(expectedAction)
25 | })
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/test/actions/updateUrl.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import updateUrl from '../../src/actions/updateUrl'
6 | import { UPDATE_URL } from '../../src/constants'
7 |
8 | describe('action creator', () => {
9 | describe('updateUrl()', () => {
10 | it('should create an action to update url', () => {
11 | const url = '/hello-world'
12 |
13 | const expectedAction = {
14 | type: UPDATE_URL,
15 | url
16 | }
17 |
18 | expect(updateUrl(url)).toEqual(expectedAction)
19 | })
20 | })
21 | })
22 |
--------------------------------------------------------------------------------
/test/components/Link.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 | import React from 'react'
5 | import TestUtils from 'react-addons-test-utils'
6 |
7 | import { Link } from '../../src/components/Link'
8 |
9 | describe('component', () => {
10 | describe('Hello world ],
15 | [ '*', Not found ]
16 | ]
17 |
18 | it('should render correct markup for default route', () => {
19 | renderer.render(
20 | Hello world
26 | ]
27 | ]
28 |
29 | const url = '/hello/world'
30 |
31 | const expectedAction = {
32 | actions: [ updateUrl(url), actionFoo(), actionBar() ],
33 | after: [ actionBaz ],
34 | type: CHANGE_PAGE_TO,
35 | url
36 | }
37 |
38 | getAction(to, routes).then(action => {
39 | expect(action).toEqual(expectedAction)
40 | done()
41 | })
42 | })
43 | })
44 | })
45 |
--------------------------------------------------------------------------------
/test/helpers/getLocation.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import getLocation, { getPathName, getQuery, getQueryString } from '../../src/helpers/getLocation'
6 |
7 | describe('helper', () => {
8 | describe('getPathName()', () => {
9 | it('should work with a root path string', () => {
10 | const to = '/'
11 | const expectedPathName = '/'
12 | expect(getPathName(to)).toBe(expectedPathName)
13 | })
14 |
15 | it('should work with a path string', () => {
16 | const to = '/hello/world'
17 | const expectedPathName = '/hello/world'
18 | expect(getPathName(to)).toBe(expectedPathName)
19 | })
20 |
21 | it('should work with a path string including query string', () => {
22 | const to = '/hello/world?with=a&query=string'
23 | const expectedPathName = '/hello/world'
24 | expect(getPathName(to)).toBe(expectedPathName)
25 | })
26 |
27 | it('should work with an array of a single root path', () => {
28 | const to = [ '/' ]
29 | const expectedPathName = '/'
30 | expect(getPathName(to)).toBe(expectedPathName)
31 | })
32 |
33 | it('should work with an array of multiple path parts', () => {
34 | const to = [ 'hello', 'world' ]
35 | const expectedPathName = '/hello/world'
36 | expect(getPathName(to)).toBe(expectedPathName)
37 | })
38 |
39 | it('should work with an array of multiple path parts including a numeric value', () => {
40 | const to = [ 'hello', 1, 'world' ]
41 | const expectedPathName = '/hello/1/world'
42 | expect(getPathName(to)).toBe(expectedPathName)
43 | })
44 |
45 | it('should work with an array of multiple path parts including a boolean value', () => {
46 | const to = [ 'hello', true, 'world' ]
47 | const expectedPathName = '/hello/true/world'
48 | expect(getPathName(to)).toBe(expectedPathName)
49 | })
50 |
51 | it('should work with an array of multiple path parts including a query object', () => {
52 | const to = [ 'hello', 'world', { with: 'a', query: 'string' } ]
53 | const expectedPathName = '/hello/world'
54 | expect(getPathName(to)).toBe(expectedPathName)
55 | })
56 | })
57 |
58 | describe('getQuery()', () => {
59 | it('should work with a root path string', () => {
60 | const to = '/'
61 | const expectedQuery = {}
62 | expect(getQuery(to)).toEqual(expectedQuery)
63 | })
64 |
65 | it('should work with a path string', () => {
66 | const to = '/hello/world'
67 | const expectedQuery = {}
68 | expect(getQuery(to)).toEqual(expectedQuery)
69 | })
70 |
71 | it('should work with a path string including a query string', () => {
72 | const to = '/hello/world?with=a&query=string'
73 | const expectedQuery = { with: 'a', query: 'string' }
74 | expect(getQuery(to)).toEqual(expectedQuery)
75 | })
76 |
77 | it('should work with an array of a single root path', () => {
78 | const to = [ '/' ]
79 | const expectedQuery = {}
80 | expect(getQuery(to)).toEqual(expectedQuery)
81 | })
82 |
83 | it('should work with an array of multiple path parts', () => {
84 | const to = [ 'hello', 'world' ]
85 | const expectedQuery = {}
86 | expect(getQuery(to)).toEqual(expectedQuery)
87 | })
88 |
89 | it('should work with an array of multiple path parts including a query object', () => {
90 | const to = '/?foo%5B%5D=bar,baz'
91 | const expectedQuery = { foo: [ 'bar', 'baz' ] }
92 | expect(getQuery(to)).toEqual(expectedQuery)
93 | })
94 |
95 | it('should work when the query object includes an array', () => {
96 | const to = '/?foo%5Bbar%5D=baz'
97 | const expectedQuery = { foo: { bar: 'baz' } }
98 | expect(getQuery(to)).toEqual(expectedQuery)
99 | })
100 |
101 | it('should work when the query object includes an object', () => {
102 | const to = [ 'hello', 'world', { with: 'a', query: 'string' } ]
103 | const expectedQuery = { with: 'a', query: 'string' }
104 | expect(getQuery(to)).toEqual(expectedQuery)
105 | })
106 |
107 | it('should decode special characters', () => {
108 | const to = '/hello/world?test=Rock+%26+Roll'
109 | const expectedQuery = { test: 'Rock & Roll' }
110 | expect(getQuery(to)).toEqual(expectedQuery)
111 | })
112 | })
113 |
114 | describe('getQueryString()', () => {
115 | it('should work with an empty query object', () => {
116 | const query = {}
117 | const expectedQueryString = ''
118 | expect(getQueryString(query)).toBe(expectedQueryString)
119 | })
120 |
121 | it('should work with multiple query items', () => {
122 | const query = { with: 'a', query: 'string' }
123 | const expectedQueryString = '?with=a&query=string'
124 | expect(getQueryString(query)).toBe(expectedQueryString)
125 | })
126 |
127 | it('should work with a query item that is an array', () => {
128 | const query = { foo: [ 'bar', 'baz' ] }
129 | const expectedQueryString = '?foo%5B%5D=bar,baz'
130 | expect(getQueryString(query)).toBe(expectedQueryString)
131 | })
132 |
133 | it('should work with a query item that is an object', () => {
134 | const query = { foo: { bar: 'baz' } }
135 | const expectedQueryString = '?foo%5Bbar%5D=baz'
136 | expect(getQueryString(query)).toBe(expectedQueryString)
137 | })
138 |
139 | it('should work with an query item that has an empty value', () => {
140 | const query = { foo: '' }
141 | const expectedQueryString = ''
142 | expect(getQueryString(query)).toBe(expectedQueryString)
143 | })
144 |
145 | it('should work with an query item that is an object and has an empty value', () => {
146 | const query = { foo: { bar: '' } }
147 | const expectedQueryString = ''
148 | expect(getQueryString(query)).toBe(expectedQueryString)
149 | })
150 |
151 | it('should encode special characters', () => {
152 | const query = { test: 'Rock & Roll' }
153 | const expectedQueryString = '?test=Rock+%26+Roll'
154 | expect(getQueryString(query)).toBe(expectedQueryString)
155 | })
156 | })
157 |
158 | describe('getLocation()', () => {
159 | it('should work with a path string', () => {
160 | const to = '/hello/world'
161 | const expectedLocation = {
162 | pathName: '/hello/world',
163 | query: {},
164 | queryString: '',
165 | url: '/hello/world'
166 | }
167 |
168 | expect(getLocation(to)).toEqual(expectedLocation)
169 | })
170 |
171 | it('should work with a path string including a query string', () => {
172 | const to = '/hello/world?a=b&c=d'
173 | const expectedLocation = {
174 | pathName: '/hello/world',
175 | query: { a: 'b', c: 'd' },
176 | queryString: '?a=b&c=d',
177 | url: '/hello/world?a=b&c=d'
178 | }
179 |
180 | expect(getLocation(to)).toEqual(expectedLocation)
181 | })
182 |
183 | it('should work with an array of a single path', () => {
184 | const to = [ '/hello/world' ]
185 | const expectedLocation = {
186 | pathName: '/hello/world',
187 | query: {},
188 | queryString: '',
189 | url: '/hello/world'
190 | }
191 |
192 | expect(getLocation(to)).toEqual(expectedLocation)
193 | })
194 |
195 | it('should work with an array of a single path without a slash prefix', () => {
196 | const to = [ 'hello/world' ]
197 | const expectedLocation = {
198 | pathName: '/hello/world',
199 | query: {},
200 | queryString: '',
201 | url: '/hello/world'
202 | }
203 |
204 | expect(getLocation(to)).toEqual(expectedLocation)
205 | })
206 |
207 | it('should work with an array of a single path with a query string', () => {
208 | const to = [ 'hello/world?a=b&c=d' ]
209 | const expectedLocation = {
210 | pathName: '/hello/world',
211 | query: { a: 'b', c: 'd' },
212 | queryString: '?a=b&c=d',
213 | url: '/hello/world?a=b&c=d'
214 | }
215 |
216 | expect(getLocation(to)).toEqual(expectedLocation)
217 | })
218 |
219 | it('should work with an array of multiple path parts', () => {
220 | const to = [ 'hello', 'world' ]
221 | const expectedLocation = {
222 | pathName: '/hello/world',
223 | query: {},
224 | queryString: '',
225 | url: '/hello/world'
226 | }
227 |
228 | expect(getLocation(to)).toEqual(expectedLocation)
229 | })
230 |
231 | it('should work with an array of multiple path parts including a query object', () => {
232 | const to = [ 'hello', 'world', { a: 'b', c: 'd' } ]
233 | const expectedLocation = {
234 | pathName: '/hello/world',
235 | query: { a: 'b', c: 'd' },
236 | queryString: '?a=b&c=d',
237 | url: '/hello/world?a=b&c=d'
238 | }
239 |
240 | expect(getLocation(to)).toEqual(expectedLocation)
241 | })
242 | })
243 | })
244 |
--------------------------------------------------------------------------------
/test/helpers/getRoute.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 | import React from 'react'
5 |
6 | import getRoute, {
7 | match,
8 | getActionCreators,
9 | getComponent,
10 | getParams
11 | } from '../../src/helpers/getRoute'
12 |
13 | describe('helper', () => {
14 | describe('match()', () => {
15 | it('should match route paths', () => {
16 | const pathName = '/'
17 | const routePath = '/'
18 | expect(match(pathName, routePath)).toBe(true)
19 | })
20 |
21 | it('should match multiple part paths', () => {
22 | const pathName = '/hello/world'
23 | const routePath = '/hello/world'
24 | expect(match(pathName, routePath)).toBe(true)
25 | })
26 |
27 | it('should match multiple part paths when param in route', () => {
28 | const pathName = '/users/1/followers'
29 | const routePath = '/users/:id/followers'
30 | expect(match(pathName, routePath)).toBe(true)
31 | })
32 |
33 | it('should match multiple part paths when only a single splat in root', () => {
34 | const pathName = '/hello/world'
35 | const routePath = '*'
36 | expect(match(pathName, routePath)).toBe(true)
37 | })
38 |
39 | it('should match multiple part paths when splat in route', () => {
40 | const pathName = '/hello/world'
41 | const routePath = '/hello/*'
42 | expect(match(pathName, routePath)).toBe(true)
43 | })
44 |
45 | it('should not match incorrect paths', () => {
46 | const pathName = '/hello/world'
47 | const routePath = '/hello/there'
48 | expect(match(pathName, routePath)).toBe(false)
49 | })
50 |
51 | it('should not match if route longer than path', () => {
52 | const pathName = '/hello/crazy'
53 | const routePath = '/hello/crazy/world'
54 | expect(match(pathName, routePath)).toBe(false)
55 | })
56 |
57 | it('should not match if path longer than route', () => {
58 | const pathName = '/hello/crazy/world'
59 | const routePath = '/hello/crazy'
60 | expect(match(pathName, routePath)).toBe(false)
61 | })
62 | })
63 |
64 | describe('getActionCreators()', () => {
65 | it('should work with no actions', () => {
66 | const actions = {}
67 | const route = [ '/hello/world', 'Hello world
' ]
68 | expect(getActionCreators(route)).toEqual(actions)
69 | })
70 |
71 | it('should work with a single action', () => {
72 | const updateFoo = () => ({})
73 | const actions = { foo: updateFoo }
74 | const route = [ '/hello/world', actions, 'Hello world
' ]
75 | expect(getActionCreators(route)).toEqual(actions)
76 | })
77 |
78 | it('should work with multiple actions', () => {
79 | const updateFoo = () => ({})
80 | const updateBar = () => ({})
81 | const actions = { foo: updateFoo, bar: updateBar }
82 | const route = [ '/hello/world', actions, 'Hello world
' ]
83 | expect(getActionCreators(route)).toEqual(actions)
84 | })
85 | })
86 |
87 | describe('getComponent()', () => {
88 | it('should return react component', () => {
89 | const component = Hello world
90 | const route = [ '/hello/world', component ]
91 | expect(getComponent(route)).toBe(component)
92 | })
93 | })
94 |
95 | describe('getParams()', () => {
96 | it('should work with no params in route', () => {
97 | const routePath = '/hello/world'
98 | const pathName = '/hello/world'
99 | const expectedParams = {}
100 | expect(getParams(routePath, pathName)).toEqual(expectedParams)
101 | })
102 |
103 | it('should work with a single param in route', () => {
104 | const routePath = '/hello/:foo'
105 | const pathName = '/hello/world'
106 | const expectedParams = { foo: 'world' }
107 | expect(getParams(routePath, pathName)).toEqual(expectedParams)
108 | })
109 |
110 | it('should work with multiple params in route', () => {
111 | const routePath = '/:foo/:bar'
112 | const pathName = '/hello/world'
113 | const expectedParams = { foo: 'hello', bar: 'world' }
114 | expect(getParams(routePath, pathName)).toEqual(expectedParams)
115 | })
116 | })
117 |
118 | describe('getRoute()', () => {
119 | const HelloWorld = Hello world
120 | const Home = Home
121 | const NotFound = Page not found
122 | const UserFollowers = User followers
123 |
124 | const updatePage = () => ({})
125 | const someUserAction = () => ({})
126 | const updateName = () => ({})
127 |
128 | const helloWorldActions = { name: updateName }
129 | const userFollowersActions = { id: someUserAction, page: updatePage }
130 |
131 | const routes = [
132 | [ 'user/:id/followers', userFollowersActions, UserFollowers ],
133 | [ 'hello', 'world', helloWorldActions, HelloWorld ],
134 | [ '/', Home ],
135 | [ '*', NotFound ]
136 | ]
137 |
138 | it('should get not found route', () => {
139 | expect(getRoute('/favicon.ico', routes)).toEqual({
140 | actionCreators: {},
141 | component: NotFound,
142 | params: {}
143 | })
144 | })
145 |
146 | it('should get not found route', () => {
147 | expect(getRoute('/favicon.ico', routes)).toEqual({
148 | actionCreators: {},
149 | component: NotFound,
150 | params: {}
151 | })
152 | })
153 |
154 | it('should get not found route', () => {
155 | expect(getRoute('/something/that/does/not/match', routes)).toEqual({
156 | actionCreators: {},
157 | component: NotFound,
158 | params: {}
159 | })
160 | })
161 |
162 | it('should get root route', () => {
163 | expect(getRoute('/', routes)).toEqual({
164 | actionCreators: {},
165 | component: Home,
166 | params: {}
167 | })
168 | })
169 |
170 | it('should get route with actions', () => {
171 | expect(getRoute('/hello/world?name=colin', routes)).toEqual({
172 | actionCreators: helloWorldActions,
173 | component: HelloWorld,
174 | params: {}
175 | })
176 | })
177 |
178 | it('should get route with actions and params', () => {
179 | expect(getRoute('/user/2/followers?page=5', routes)).toEqual({
180 | actionCreators: userFollowersActions,
181 | component: UserFollowers,
182 | params: { id: '2' }
183 | })
184 | })
185 | })
186 | })
187 |
--------------------------------------------------------------------------------
/test/helpers/getState.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import { getState, routerReducer } from '../../src'
6 |
7 | describe('helper', () => {
8 | describe('getState()', () => {
9 | const UPDATE_FOO = 'UPDATE_FOO'
10 | const UPDATE_BAR = 'UPDATE_BAR'
11 | const UPDATE_BAZ = 'UPDATE_BAZ'
12 |
13 | const updateFoo = foo => ({ foo, type: UPDATE_FOO })
14 |
15 | const updateBar = bar => new Promise(resolve => {
16 | setTimeout(() => {
17 | resolve({ bar, type: UPDATE_BAR })
18 | }, 5)
19 | })
20 |
21 | const updateBaz = ({ foo, bar = 'michoacan' }) => new Promise(resolve => {
22 | setTimeout(() => {
23 | resolve({ baz: foo + bar, type: UPDATE_BAZ })
24 | }, 5)
25 | })
26 |
27 | const fooReducer = (state = 1, action) => {
28 | switch (action.type) {
29 | case UPDATE_FOO:
30 | return parseInt(action.foo, 10)
31 | default:
32 | return state
33 | }
34 | }
35 |
36 | const barReducer = (state = '', action) => {
37 | switch (action.type) {
38 | case UPDATE_BAR:
39 | return action.bar
40 | default:
41 | return state
42 | }
43 | }
44 |
45 | const bazReducer = (state = '', action) => {
46 | switch (action.type) {
47 | case UPDATE_BAZ:
48 | return action.baz
49 | default:
50 | return state
51 | }
52 | }
53 |
54 | it('should return correct state', done => {
55 | const reducer = routerReducer({ foo: fooReducer })
56 |
57 | const routes = [
58 | [ 'hello', 'world', { foo: updateFoo } ]
59 | ]
60 |
61 | const url = '/hello/world?foo=2'
62 |
63 | const expectedState = {
64 | foo: 2,
65 | url
66 | }
67 |
68 | getState(url, routes, reducer).then(state => {
69 | expect(state).toEqual(expectedState)
70 | done()
71 | })
72 | })
73 |
74 | it('should return correct state with async action creator', done => {
75 | const reducer = routerReducer({ foo: fooReducer, bar: barReducer })
76 |
77 | const routes = [
78 | [ 'hello', 'world', { foo: updateFoo, bar: updateBar } ]
79 | ]
80 |
81 | const url = '/hello/world?foo=3&bar=guanajuato'
82 |
83 | const expectedState = {
84 | bar: 'guanajuato',
85 | foo: 3,
86 | url
87 | }
88 |
89 | getState(url, routes, reducer).then(state => {
90 | expect(state).toEqual(expectedState)
91 | done()
92 | })
93 | })
94 |
95 | it('should return correct state with async after action creator', done => {
96 | const reducer = routerReducer({ foo: fooReducer, baz: bazReducer })
97 |
98 | const routes = [
99 | [ 'hello', 'world', { foo: updateFoo, after: updateBaz } ]
100 | ]
101 |
102 | const url = '/hello/world?foo=4'
103 |
104 | const expectedState = {
105 | baz: '4michoacan',
106 | foo: 4,
107 | url
108 | }
109 |
110 | getState(url, routes, reducer).then(state => {
111 | expect(state).toEqual(expectedState)
112 | done()
113 | })
114 | })
115 |
116 | it(
117 | 'should return correct state with both async action creator and async after action creator',
118 | done => {
119 | const reducer = routerReducer({ foo: fooReducer, bar: barReducer, baz: bazReducer })
120 |
121 | const routes = [
122 | [ 'hello', 'world', { foo: updateFoo, bar: updateBar, after: updateBaz } ]
123 | ]
124 |
125 | const url = '/hello/world?foo=5&bar=oaxaca'
126 |
127 | const expectedState = {
128 | bar: 'oaxaca',
129 | baz: '5oaxaca',
130 | foo: 5,
131 | url
132 | }
133 |
134 | getState(url, routes, reducer).then(state => {
135 | expect(state).toEqual(expectedState)
136 | done()
137 | })
138 | }
139 | )
140 | })
141 | })
142 |
--------------------------------------------------------------------------------
/test/helpers/resolveActionCreator.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import {
6 | resolveActionCreator,
7 | getResolvedActionCreators
8 | } from '../../src/helpers/resolveActionCreator'
9 |
10 | describe('helper', () => {
11 | describe('resolveActionCreator()', () => {
12 | const action = { type: 'HELLO_WORLD' }
13 | const actionCreator = () => action
14 |
15 | it('should return a promise', () => {
16 | expect(resolveActionCreator(actionCreator, undefined)).toBeA(Promise)
17 | })
18 |
19 | it('should return an action once resolved', done => {
20 | resolveActionCreator(actionCreator, undefined).then(a => {
21 | expect(a).toEqual(action)
22 | done()
23 | })
24 | })
25 |
26 | it('should pass data as arguments to action creator', done => {
27 | const FOO = 'FOO'
28 |
29 | const fooActionCreator = foo => ({
30 | foo,
31 | type: FOO
32 | })
33 |
34 | const expectedAction = {
35 | foo: 'bar',
36 | type: FOO
37 | }
38 |
39 | resolveActionCreator(fooActionCreator, 'bar').then(a => {
40 | expect(a).toEqual(expectedAction)
41 | done()
42 | })
43 | })
44 |
45 | it('should work with an async action creator', done => {
46 | const asyncActionCreator = () => new Promise(resolve => {
47 | setTimeout(() => {
48 | resolve(action)
49 | }, 5)
50 | })
51 |
52 | resolveActionCreator(asyncActionCreator, undefined).then(a => {
53 | expect(a).toEqual(action)
54 | done()
55 | })
56 | })
57 | })
58 |
59 | describe('getResolvedActionCreators()', () => {
60 | const FOO = 'FOO'
61 | const BAR = 'BAR'
62 |
63 | const fooAction = { type: FOO }
64 | const barAction = { type: BAR }
65 |
66 | const expectedActions = [ fooAction, barAction ]
67 |
68 | const fooActionCreator = () => fooAction
69 | const barActionCreator = () => barAction
70 |
71 | it('should return an empty array by default', () => {
72 | expect(getResolvedActionCreators(new Map())).toEqual([])
73 | })
74 |
75 | it('should return an array of promises', () => {
76 | const actionCreatorsMap = new Map()
77 |
78 | actionCreatorsMap.set(fooActionCreator, undefined)
79 | actionCreatorsMap.set(barActionCreator, undefined)
80 |
81 | getResolvedActionCreators(actionCreatorsMap).forEach(promise => {
82 | expect(promise).toBeA(Promise)
83 | })
84 | })
85 |
86 | it('should return an array of actions once resolved', done => {
87 | const actionCreatorsMap = new Map()
88 |
89 | actionCreatorsMap.set(fooActionCreator, undefined)
90 | actionCreatorsMap.set(barActionCreator, undefined)
91 |
92 | Promise.all(getResolvedActionCreators(actionCreatorsMap)).then(actions => {
93 | expect(actions).toEqual(expectedActions)
94 | done()
95 | })
96 | })
97 |
98 | it('should pass data as arguments to each action creator', done => {
99 | const fooWithArgsActionCreator = type => ({ type })
100 | const barWithArgsActionCreator = type => ({ type })
101 |
102 | const actionCreatorsMap = new Map()
103 |
104 | actionCreatorsMap.set(fooWithArgsActionCreator, FOO)
105 | actionCreatorsMap.set(barWithArgsActionCreator, BAR)
106 |
107 | Promise.all(getResolvedActionCreators(actionCreatorsMap)).then(actions => {
108 | expect(actions).toEqual(expectedActions)
109 | done()
110 | })
111 | })
112 |
113 | it('should work with an async action creator', done => {
114 | const asyncActionCreator = () => new Promise(resolve => {
115 | setTimeout(() => {
116 | resolve(barAction)
117 | }, 5)
118 | })
119 |
120 | const actionCreatorsMap = new Map()
121 |
122 | actionCreatorsMap.set(fooActionCreator, undefined)
123 | actionCreatorsMap.set(asyncActionCreator, undefined)
124 |
125 | Promise.all(getResolvedActionCreators(actionCreatorsMap)).then(actions => {
126 | expect(actions).toEqual(expectedActions)
127 | done()
128 | })
129 | })
130 | })
131 | })
132 |
--------------------------------------------------------------------------------
/test/middleware/router.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 | import React from 'react'
5 |
6 | import routerMiddleware from '../../src/middleware/router'
7 | import updateUrl from '../../src/actions/updateUrl'
8 | import { CHANGE_PAGE_TO } from '../../src/constants'
9 |
10 | describe('middleware', () => {
11 | describe('router()', () => {
12 | const dispatch = () => ({})
13 |
14 | const next = action => action
15 |
16 | const updatePage = page => ({ type: 'UPDATE_PAGE', page })
17 |
18 | const routes = [
19 | [ 'hello', 'world', { page: updatePage }, Hello world
]
20 | ]
21 |
22 | const router = routerMiddleware(routes, { isServer: true })
23 |
24 | it('should not alter action that is not change page to', () => {
25 | const action = {
26 | type: 'HELLO_WORLD'
27 | }
28 |
29 | expect(router({ dispatch })(next)(action)).toEqual(action)
30 | })
31 |
32 | it('should add correct actions and url props to change page to action', done => {
33 | const action = {
34 | options: { shouldAddToHistory: false },
35 | to: [ 'hello', 'world' ],
36 | type: CHANGE_PAGE_TO
37 | }
38 |
39 | const url = '/hello/world'
40 |
41 | const actions = [ updateUrl(url), updatePage(undefined) ]
42 |
43 | const result = router({ dispatch })(next)(action)
44 |
45 | setTimeout(() => {
46 | result.then(({ a, u }) => {
47 | expect(a).toEqual(actions)
48 | expect(u).toEqual(url)
49 | })
50 |
51 | done()
52 | }, 0)
53 | })
54 | })
55 | })
56 |
--------------------------------------------------------------------------------
/test/reducers/router.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import routerReducer from '../../src/reducers/router'
6 | import { CHANGE_PAGE_TO, UPDATE_URL } from '../../src/constants'
7 |
8 | describe('reducer', () => {
9 | describe('router()', () => {
10 | const pageReducer = (state = 1, { page }) => (parseInt(page || state, 10))
11 |
12 | const reducers = {
13 | page: pageReducer
14 | }
15 |
16 | const reducer = routerReducer(reducers)
17 |
18 | it('should return default state when no action passed to reducer', () => {
19 | const expectedState = {
20 | page: 1,
21 | url: '/'
22 | }
23 |
24 | expect(reducer({}, {})).toEqual(expectedState)
25 | })
26 |
27 | it('should run root reducer when not change page to action type', () => {
28 | const expectedState = {
29 | page: 5,
30 | url: '/'
31 | }
32 |
33 | expect(reducer({}, { page: 5 })).toEqual(expectedState)
34 | })
35 |
36 | it('should run batch reducer when change page to action type', () => {
37 | const expectedState = {
38 | page: 1,
39 | url: '/hello/world'
40 | }
41 |
42 | expect(reducer({}, {
43 | actions: [{ type: UPDATE_URL, url: '/hello/world' }, { page: undefined }],
44 | after: [],
45 | to: [ 'hello', 'world' ],
46 | type: CHANGE_PAGE_TO
47 | })).toEqual(expectedState)
48 | })
49 | })
50 | })
51 |
--------------------------------------------------------------------------------
/test/reducers/url.js:
--------------------------------------------------------------------------------
1 | /* eslint-env mocha */
2 |
3 | import expect from 'expect'
4 |
5 | import urlReducer from '../../src/reducers/url'
6 | import { UPDATE_URL } from '../../src/constants'
7 |
8 | describe('reducer', () => {
9 | describe('url()', () => {
10 | it('should return the default state by default', () => {
11 | expect(urlReducer()).toEqual('/')
12 | })
13 |
14 | it('should handle update url action type', () => {
15 | const url = '/hello-world'
16 |
17 | expect(urlReducer('/initial-url', {
18 | type: UPDATE_URL,
19 | url
20 | })).toEqual(url)
21 | })
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | export default {
2 | externals: {
3 | react: 'React',
4 | 'react-redux': 'ReactRedux'
5 | },
6 | module: {
7 | loaders: [{
8 | exclude: /node_modules/,
9 | loader: 'babel',
10 | test: /\.js$/
11 | }]
12 | }
13 | }
14 |
--------------------------------------------------------------------------------