server-react-redux v0.0.1

server-react-redux

Use react-redux without client-side JavaScript.

Motivation

Develop with the benefits of react-redux without the need for any client-side JavaScript. server-react-redux supports many of the basic uses of React and Redux, all with server only rendering and no client-side JS.

Installation

npm install --save server-react-redux

Then apply the handleRender middleware to your express server:

import express from 'express';
import { handleRender } from 'server-react-redux';

import App from './app-component';
import reducer from './app-reducer';
import renderFullPage from './render-full-page';

var app = express();
...
app.use(handleRender({
  App,
  reducer,
  renderFullPage
}));

See: Express's Using middleware

Usage

handleRender(options)

Create an Express handler to handle server requests.

Arguments

• options (Object): And object specifying options for handling requests
  • App (Object): React class to render as root app component. Can be a connected component.
  • reducer: Root reducer for redux app.
  • renderFullPage (Function): A function to provide full page markup.
    • Arguments
      • appContent: Server rendered react app string to be included on page.
    • Returns
      • HTML string to return on page. No need to include any JavaScript!
  • defaultState (Object): If specified, the default state to use for initial app load, otherwise it will use default state from reducer.

Returns

An Express request handler which expects Express req and res objects as parameters.

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

server-react-redux exposes a similar connect API as react-redux, but with one major exception.

mapDispatchToProps does not generate props that are functions that call action creators and directly dispatch their resulting actions. Instead it generates functions that call action creators and returns strings. The strings contain routes that can be used as href attributes that once navigated to will load a new server rendered page with an updated state reflecting the result of the action.

• [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object): A map from prop name to Redux action creators.

react-redux docs have complete info on the other arguments.

Limitations

Since no JavaScript is loaded on the client and the function props from mapDispatchToProps only returns route strings and do not directly dispatch actions, therefore the types of user interactions that can trigger an action are limited to html actions.

For now, only GET routes (used by href attributes) are supported, but support for POST routes (used by form action attributes) and form submit payloads is technically possible.

In addition, server-react-redux does not support mapDispatchToProps functions, but only the simplified Object interface mapping Redux action creators.