Opinionated glue for creating web apps with `react` and `redux`.
Opinionated glue for building web apps with React and Redux.
Glues together react
, redux
, react-router
, react-router-redux
, redial
and redux-devtools-extension
.
Useful for both client side and UniversalJS apps.
This package is experimental and the API may receive breaking changes before v1.0.0.
npm install --save rechannel react react-dom react-redux \
react-router react-router-redux redial redux
import rechannel from 'rechannel';
import routes from './routes';
import reducer from './reducer';
//creates a store, sets up the router, pre-fetches the necessary data
// and renders the page
rechannel({
routes,
reducer
});
Note: If you're not using a server you'll have to create your own HTML file.
Try the example.
import express from 'express';
import rechannel from 'rechannel';
import routes from './routes';
import reducer from './reducer';
const app = express();
app.use('/', express.static(`./public`));
//returns a middleware function that creates a store, sets up the router, pre-fetches necessary data
// and renders the page
app.use(rechannel({
routes,
reducer
}));
const server = app.listen(8000, () => {
const host = server.address().address;
const port = server.address().port;
console.log('App running at http://%s:%s', host, port);
});
Try the example.
rechannel(options : object)
Create a store, set up the router, pre-fetch necessary data and render the page.
Options:
Common options:
routes : Element|function
Required. A <Route/>
element or a function creating a <Route/>
element. Function are passed the getState()
and dispatch()
methods from the redux store (useful for restricting access in a onEnter
hook). Learn more about configuring routes in the React Router docs.reducer : object
Required. A keyed object of reducer functions that may be passed to combineReducers()
. Learn more about reducer functions in the Redux docs.middleware : array<function>
Optional. An array of middleware functions. Learn more about middleware functions in the Redux docs.enhancer : array<function>
Optional. An array of enhancer functions. Learn more about enhancer functions in the Redux docs.history : History
Optional. A history instance. Default's to react-router
's browserHistory
on the client and the result of react-router
's createMemoryHistory
on the server. Learn more about history objects in the react-router
Histories docs.Hooks:
$init : function
Optional. Called after the redux store is initialised. May return a promise.$load : function
Optional. Called after any data is (pre-)loaded. May return a promise.Client specific options:
element : HTMLElement
Optional. The HTMLElement
which React will render into. Defaults to document.querySelector('#app')
.Server specific options:
html : Component
Optional. A component that renders the root HTML. Passed the Redux state
and the React Router component(s) as children
via props
. Defaults to this component.send : function(res, html)
Optional. A function that allows customisation of the response sent by the server. Passed the response object and a HTML string.Returns:
Returns nothing on the client. Returns an express
middleware function on the server.
Note: On the client, routes aren't re-created for each time you navigate to a new page, if you're using a factory function to create the routes and utilising the cookies
or query
parameters,
the routes won't be re-created with the new query or cookie values. The route factory function will only be re-evaluated when you re-load the page.
createHtml(options : object)
Create a React component for rendering <html>
on the server.
Options:
title : string|function
script : string|Array<string>
style : string|Array<string>
Returns:
Returns a React component for rendering <html>
on the server.
headers
as a parameter for all hooksquery
, cookies
and headers
to your Html
componenthistory
objectredux-immutable-state-invariant
to non-production builds which trigger an error when the redux state has been mutatedoptions
to assist developers in finding problems earlierquery
parameter to the $init
, $load
and fetch
hooks$init()
and $load()
hookscreateHtml()
parameters script
and style
need to be cast to arrayscreateHtml()
parameters script
and style
now accept an array of script and style filesHtml
component into a factory function to allow customisation of the <html>
title, script and style namesfetch
trigger to load
reducer
to be a single reducer functionmiddleware
and enhancer
parameters to be a function call that receives the req
in order to be configured e.g. redux-effects-cookie
locals
passed to redial
- allow them to be user configurable