npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-universal-router

v0.1.0

Published

Universal router for redux

Downloads

5

Readme

redux-universal-router

A universal router designed for redux.

  • works server and client-side
  • keeps the router state in your redux store
  • fetch async data or require.ensure via redux actions

Highly inspired by fluxible-router, it uses routr and history.

This is a work-in progess

Not ready for production: redux-universal-router is a baby-project, there's still work to be done, especially on the client-side part.

Usage

You can run an example from the example directory:

git clone https://github.com/gpbl/redux-universal-router.git
cd redux-universal-router
cd example
npm install
npm start
# now open http://localhost:3000

Steps

  1. Define the routes as objects
  2. Set up the reducer and the redux store
  3. Server-side: create a router instance and render the root component
  4. Client-side: create a router instance, listen to history and mount the root component
  5. Connect the root component to the router
  6. Use <Link> or dispatch ROUTE_NAVIGATE to navigate between routes

1. Define the routes as objects

Routes are the same objects you pass to routr, with two additional parameters:

  • handler (required) is the react component that should will render the route
  • actionCreator (optional) is a redux action creator that will be dispatched before the route is rendered
    • it will receive the route's params as the only argument
    • the action returned by the action creator must follow the FSA standard
    • if the payload returned by the action is a Promise, the route will wait for it before navigating to the new route
const routes = {
  home: {
    path: "/",
    method: "get",    // remember this is required
    handler: HomePage
  },
  photo: {
    path: "/photo/:id",
    method: "get",
    handler: PhotoPage,
    actionCreator: requestPhoto
  }
};

2. Set up the reducer and the redux store

To work correctly, the router's reducer must save its data in the router key in the root of the store:

// add the router reducer
import { combineReducers, createStore } from "rdux"
import { reducer as router } from "redux-universal-router";
const reducer = combineReducers({ router } );

// create the redux store
import { createStore } from "redux";
const store = createStore(reducer);

3. Server-side: create a router instance and render the root component

Use router.navigate(url, callback) to render the root component. Remember you must create a new store and a new router for each request. So your middleware could look like:

import React from "react";
import { Provider } from "react-redux";
import serialize from "serialize-javascript";

function (req, res, next) {

  const store = createStore(reducer);
  const router = new Router({ store, routes });

  router.navigate(req.url, (err) => {

    const content = React.renderToString(
      <Provider store={ store } >
        { () => <Application /> }
      </Provider>
    );

    const initialState = `window.__INITIALSTATE__=${serialize(store.getState())};`;

    if (err && err.statusCode) {
      res.status(err.statusCode);
    }

    res.send(`<!doctype html>
    <html>
      <body>
        <div id="content">${content}</div>
        <script>${initialState}</script>
      </body>
    </html>`);

  });
};

4. Client-side: create a router instance, listen to history and mount the root component

import { createStore } from "redux";
import Router from "redux-universal-route";
import routes from "./routes";

const store = createStore(reducer, window.__INITIALSTATE__);
const router = new Router({ store, routes });

// listen to browser history
router.listen();

router.navigate(document.location.pathname, () => {

  React.render(
    <div>
      <Provider store={ store }>
        { () => <Application /> }
      </Provider>
    </div>,
    document.getElementById("content")
  );

})

5. Connect the root component to the router

Since the router state is saved in the store, you can just connect your root component and use its data to know which route handler should be rendered.

The router's store has three parameters: currentRoute, nextRoute and err, all optionals.

In your root component, you want to render the handler component of the currentRoute. The component is available as currentRoute.config.handler.

  • use currentRoute to know get the config of the current route. Careful: if the route is not available in your routes, this will be null.
  • use nextRoute to get the config of the route it's being called. It has a value only while navigating to a new route, e.g. when waiting to fetch data from an external API.
  • use err to know if you have to display an error when loading the route. The route's actionCreator can return an error with a statusCode, to render an error page or a "not-found" page.
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "redux-universal-router";

@connect(state => ( { router: state.router } ))
class Application extends Component {

  render() {

    const { router } = this.props;
    const { currentRoute, nextRoute, err } = router;

    const Handler = currentRoute && currentRoute.config.handler;

    return (
      <div>

        { err && err.statusCode === 404 && <NotFoundPage /> }
        { err && err.statusCode !== 404 && <ErrorPage error={ err } /> }
        { !err && <Handler {...currentRoute.params} /> }

      </div>
    );
  }
}

6. Use <Link> or dispatch ROUTE_NAVIGATE to navigate between routes

Link is the included React component to replace your <a>:

import { Link } from "redux-universal-router";

class Thing extends Component {

  render() {
    return (
      <p>
        <Link href="/route">click me</Link>
      </p>
    )
  }
}

Connecting the component to the store, you can also dispatch ROUTE_NAVIGATE to navigate to another url:

import { connect } from "react-redux";

@connect()
class AnotherThing extends Component {

  render() {
    return (
      <p>
        <a onClick={ this.handleClick }>click me too</a>
      </p>
    )
  }

  handleClick(e) {
    e.preventDefault();
    this.props.dispatch({
      type: "ROUTE_NAVIGATE",
      payload: {
        pushUrl: "/route"
      }
    })
  }

}