🎖 seamless redux-first routing -- just dispatch actions
MIT License
1.57k
stars
143
forks
source link
readme
Redux-First Router
Think of your app in terms of states, not routes or components. Connect your components and just dispatch Flux Standard Actions!
## Motivation
To be able to use Redux *as is* while keeping the address bar in sync. To define paths as actions, and handle path params and query strings as action payloads.
The address bar and Redux actions should be *bi-directionally* mapped, including via the browser's back/forward buttons. Dispatch an action and the address bar updates.
Change the address, and an action is dispatched.
In addition, here are some obstacles **Redux-First Router** seeks to *avoid*:
* Rendering from state that doesn't come from Redux
* Dealing with the added complexity from having state outside of Redux
* Cluttering components with route-related code
* Large API surface areas of frameworks like `react-router` and `next.js`
* Routing frameworks getting in the way of optimizing animations (such as when animations coincide with component updates).
* Having to do route changes differently in order to support server-side rendering.
## Usage
### Install
`yarn add redux-first-router`
(A minimal `` component exists in the separate package [`redux-first-router-link`](https://github.com/faceyspacey/redux-first-router-link).)
### Quickstart
```js
// configureStore.js
import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
import { connectRoutes } from 'redux-first-router'
import page from './pageReducer'
const routesMap = {
HOME: '/',
USER: '/user/:id'
}
export default function configureStore(preloadedState) {
const { reducer, middleware, enhancer } = connectRoutes(routesMap)
const rootReducer = combineReducers({ page, location: reducer })
const middlewares = applyMiddleware(middleware)
const enhancers = compose(enhancer, middlewares)
const store = createStore(rootReducer, preloadedState, enhancers)
return { store }
}
```
```js
// pageReducer.js
import { NOT_FOUND } from 'redux-first-router'
const components = {
HOME: 'Home',
USER: 'User',
[NOT_FOUND]: 'NotFound'
}
export default (state = 'HOME', action = {}) => components[action.type] || state
```
```js
// App.js
import React from 'react'
import { connect } from 'react-redux'
// Contains 'Home', 'User' and 'NotFound'
import * as components from './components';
const App = ({ page }) => {
const Component = components[page]
return
}
const mapStateToProps = ({ page }) => ({ page })
export default connect(mapStateToProps)(App)
```
```js
// components.js
import React from 'react'
import { connect } from 'react-redux'
const Home = () =>
## Motivation
To be able to use Redux *as is* while keeping the address bar in sync. To define paths as actions, and handle path params and query strings as action payloads.
The address bar and Redux actions should be *bi-directionally* mapped, including via the browser's back/forward buttons. Dispatch an action and the address bar updates.
Change the address, and an action is dispatched.
In addition, here are some obstacles **Redux-First Router** seeks to *avoid*:
* Rendering from state that doesn't come from Redux
* Dealing with the added complexity from having state outside of Redux
* Cluttering components with route-related code
* Large API surface areas of frameworks like `react-router` and `next.js`
* Routing frameworks getting in the way of optimizing animations (such as when animations coincide with component updates).
* Having to do route changes differently in order to support server-side rendering.
## Usage
### Install
`yarn add redux-first-router`
(A minimal `` component exists in the separate package [`redux-first-router-link`](https://github.com/faceyspacey/redux-first-router-link).)
### Quickstart
```js
// configureStore.js
import { applyMiddleware, combineReducers, compose, createStore } from 'redux'
import { connectRoutes } from 'redux-first-router'
import page from './pageReducer'
const routesMap = {
HOME: '/',
USER: '/user/:id'
}
export default function configureStore(preloadedState) {
const { reducer, middleware, enhancer } = connectRoutes(routesMap)
const rootReducer = combineReducers({ page, location: reducer })
const middlewares = applyMiddleware(middleware)
const enhancers = compose(enhancer, middlewares)
const store = createStore(rootReducer, preloadedState, enhancers)
return { store }
}
```
```js
// pageReducer.js
import { NOT_FOUND } from 'redux-first-router'
const components = {
HOME: 'Home',
USER: 'User',
[NOT_FOUND]: 'NotFound'
}
export default (state = 'HOME', action = {}) => components[action.type] || state
```
```js
// App.js
import React from 'react'
import { connect } from 'react-redux'
// Contains 'Home', 'User' and 'NotFound'
import * as components from './components';
const App = ({ page }) => {
const Component = components[page]
return