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

@helpfulhuman/redux-router

v1.0.9

Published

A routing solution for Redux applications.

Downloads

2

Readme

Redux-Router

This library is a state-only router that is designed specifically for use with Redux. It is built on top of Helpful Human's router-kit library.

Getting Started

Install via npm:

npm install --save @helpfulhuman/redux-router

Create Your Router

The createRouter() method is a factory for creating a new ReduxRouter instance that you can use to add your middleware. It should be noted that the ReduxRouter class extends the Router class provided by router-kit.

Note: You'll likely want to designate a file to your route configuration.

import { createRouter } from "@helpfulhuman/redux-router";

// create a router instance
var router = createRouter();

// add middleware that will be applied to all routes
router.use(function logger (ctx, next) {
  console.log("router -> " + ctx.location.href);
  next();
});

// add middleware that applies to a partial route name and redirects
// the user if the "token" value isn't set in their redux store
router.use("/account", function isLoggedIn (ctx, next) {
  if ( ! ctx.state.token) {
    next(null, "/login");
  } else {
    next();
  }
});

// add a handler that dispatches an action to redux
router.exact("/login", function (ctx, next) {
  ctx.dispatch({ type: "SET_VIEW", view: "login" });
});

// add a handler that dispatches actions based on route parameters
router.exact("/account/:page", function (ctx, next) {
  var page = ctx.params.page;
  if (page !== "profile" && page !== "billing") {
    return next(new Error("Page Not Found"));
  }

  ctx.dispatch({ type: "SET_VIEW", view: "account." + page });
});

// export the router to add it to your store
export default router;

The context Object

Field | Type | Description ------|------|------------ getState | Function | Your Redux store's getState() method (in case you need the absolute most recent state). dispatch | Function | Your Redux store's dispatch() method. location | Object | The location object provided by history when routing is initialized. params | Object | The parsed URI tokens for the route when a path with tokens has been provided for the middleware or route handler. Example: if you had a handler bound to /greet/:name and the route was /greet/world, then this value would be { name: "world" }. query | Object | A parsed version of the query string for the route. An example would be ?foo=bar being converted to { foo: "bar" }. state | Object | The state of your Redux store when the route is first invoked. uri | String | The URI or location.pathname for the request.

Changing Route

Rather than invoking route changes on the router directly, this library does its best to plug in to the way that Redux handles state changes: via action creators. There are 3 different action creators available for pushing, replacing and popping state.

Note: Both pushState() and replaceState() support an object as an optional second argument. This is to be used with aliases, which will be explained in more detail later on.

import { pushState, replaceState, popState } from "@helpfulhuman/redux-router";

// push a new route onto the stack
store.dispatch(pushState("/example"));

// redirect to a new route by replacing the current route on the stack
store.dispatch(replaceState("/something/else"));

// go back to the previous route by popping the stack
store.dispatch(popState());

Using Aliases

Aliases allow you to work with a semantic route name as an abstraction over the actual route's URI. By not littering URIs throughout your code, you can reduce the risk of forming bad URIs or reduce the hastle often associating with having to refactor URIs.

Note: You can use tokens in the path that you're aliasing.

// add a named alias for routing to a specific task
router.alias("viewTask", "/tasks/:taskId");

// route to the aliased URI -> /tasks/1000
pushState("viewTask", { taskId: "1000" });

Connecting Your Router to redux

Once you've set up your routes, you can generate middleware for your Redux store with the .connectStore() method. This method can optionally take a custom history instance (if empty, one will be created for you) and returns the middleware for Redux.

import createHistory from "history/createBrowserHistory";
import { createStore, applyMiddleware } from "redux";
import router from "./router";

// this is optional
var history = createHistory();

var store = createStore(reducer, applyMiddleware(
  router.connectStore(history)
));