Code Monkey home page Code Monkey logo

fusion-plugin-connected-react-router's Introduction

fusion-plugin-connected-react-router

Build status

The fusion-plugin-connected-react-router package provides integration points with connected-react-router. It is designed to be used along side of fusion-plugin-react-router.


Table of contents


Installation

yarn add fusion-plugin-connected-react-router connected-react-router

Usage

This plugin provides a ReduxEnhancer plugin for integrating connected-react-router into your app. See connected-react-router docs for usage.


Setup

// src/main.js
import App from 'fusion-react';
import Router, {RouterToken, RouterProviderToken} from 'fusion-plugin-react-router';
import ConnectedRouterEnhancer from 'fusion-plugin-connected-react-router';
import {EnhancerToken} from 'fusion-plugin-react-redux';
import {ConnectedRouter} from 'connected-react-router';
import root from './components/root';

export default function start(App) {
  const app = new App(root);
  // Make sure you register `fusion-plugin-react-router` on the `RouterToken`
  app.register(RouterToken, Router);
  // Register the connected router enhancer on the redux EnhancerToken
  app.register(EnhancerToken, ConnectedRouterEnhancer);
  // Register the ConnectedRouter provider on the RouterProviderToken
  app.register(RouterProviderToken, ConnectedRouter);
  // ... other registrations
  return app;
}

If you have other redux enhancers, it may be easier to integrate via a custom plugin

// src/main.js
import App from 'fusion-react';
import {createPlugin} from 'fusion-core';
import Router, {RouterToken, RouterProviderToken} from 'fusion-plugin-react-router';
import ConnectedRouterEnhancer, {ConnectedRouterToken} from 'fusion-plugin-connected-react-router';
import {EnhancerToken} from 'fusion-plugin-react-redux';
import {ConnectedRouter} from 'connected-react-router';
import {compose} from 'redux';
import root from './components/root';

export default function start(App) {
  const app = new App(root);
  // Make sure you register `fusion-plugin-react-router` on the `RouterToken`
  app.register(RouterToken, Router);
  // Register the ConnectedRouter provider on the RouterProviderToken
  app.register(RouterProviderToken, ConnectedRouter);
  // Register the connected router enhancer a token to reference latter
  app.register(ConnectedRouterToken, ConnectedRouterEnhancer);
  // Register a custom plugin that composes all your enhancers
  app.register(EnhancerToken, createPlugin({
    deps: {connectedRouterEnhancer: ConnectedRouterToken},
    provides: ({connectedRouterEnhancer}) => {
      return compose(
        connectedRouterEnhancer,
        // any other custom enhancers...
        myCustomEnhancer
      );
    }
  }));
  // ... other registrations
  return app;
}

API

Registration API

Plugin
import ConnectedRouterPlugin from 'fusion-plugin-connected-react-router';

The plugin.

ConnectedRouterToken
import {ConnectedRouterToken} from 'fusion-plugin-connected-react-router';

A token for registering the router plugin on. Useful for integrating with other redux enhancers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.