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

$3

yarn add redux-first-router

(A minimal component exists in the separate package redux-first-router-link.)

$3

``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 = () =>

Home

const User = ({ userId }) =>

{User ${userId}}

const mapStateToProps = ({ location }) => ({
userId: location.payload.id
})
const ConnectedUser = connect(mapStateToProps)(User)

const NotFound = () =>

404

export { Home, ConnectedUser as User, NotFound }
`

Documentation

$3

#### Flow Chart
!Redux First Router Flow Chart

#### connectRoutes
connectRoutes is the primary "work" you will do to get Redux First
Router going. It's all about creating and maintaining a pairing of
action types and dynamic express style route paths. If you use our `` component and pass an action as its href prop, you can change the URLs you use here any time without having to change your application code.

#### URL parsing
Besides the simple option of matching a literal path, all matching capabilities of the path-to-regexp package we use are now supported, except unnamed parameters.

#### Flux Standard Actions
One of the goals of Redux First Router is to NOT alter your actions
and be 100% flux standard action-compliant. That allows for automatic
support for packages such as redux-actions.

#### Location Reducer
The location reducer primarily maintains the state of the current pathname and action dispatched (type + payload). That's its core mission.

#### Link Component
A minimal link component exists in the separate package redux-first-router-link.

#### Query Strings
Queries can be dispatched by assigning a query object containing key/vals to an action, its payload object or its meta object.

#### React Native
Redux First Router has been thought up from the ground up with React Native (and server environments) in mind. They both make use of the history package's createMemoryHistory. In coordination, we are able to present you with a first-rate developer experience when it comes to URL-handling on native. We hope you come away feeling: "this is what I've been waiting for."

$3

#### addRoutes
Sometimes you may want to dynamically add routes to routesMap, for
example so that you can codesplit routesMap. You can do this using the
addRoutes function.

#### Blocking navigation
Sometimes you may want to block navigation away from the current
route, for example to prompt the user to save their changes.

#### Scroll Restoration
Complete Scroll restoration and hash #links handling is addressed primarily by one of our companion packages: redux-first-router-restore-scroll (we like to save you the bytes sent to clients if you don't need it).

#### Server Side Rendering
Ok, this is the biggest example here, but given what it does, we think it's extremely concise and sensible.

#### Client-Only API
The following are features you should avoid unless you have a reason
that makes sense to use them. These features revolve around the
history package's API. They make the most sense in React Native--for
things like back button handling.

#### Low-level API
Below are some additional methods we export. The target user is
package authors. Application developers will rarely need this.

#### Version 2 Migration Steps
In earlier versions history was a peerDependency, this is no longer
the case since version 2 has its own history management tool. This
means that the arguments passed to connectRoutes(documentation) need
to be changed.

#### Usage with redux-persist
You might run into a situation where you want to trigger a redirect as soon as possible in case some particular piece of state is or is not set. A possible use case could be persisting checkout state, e.g. checkoutSteps.step1Completed.

#### Prior Art
These packages attempt in similar ways to reconcile the browser
history with redux actions and state.

$3

- Dispatching thunks & pathless routes
- SEO-friendly styled links
- Automatically changing page