redux-observables-server-side-rendering
A middleware that works in combination with react-router
, react-router-redux
and redux-observables
.
Installation
npm install --save redux-observables-server-side-rendering
Usage
FIRST OF ALL
This is very customized to an existing project, but it works.
If you have suggestions to do this in a better or more common way don't, hesitate to make a pull request or message me.
Once you've configured your application you can use the ssr object created inside the server, handed over to the store and the epic middleware as dependency, in your own epic implementations.
// example epicconst myDataFetchingEpic = actions$
You can find below how to configure your application to get ssr with redux-observables work:
Configuration
Let's assume we have have redux
application with components
, containers
, modules
and redux-observables
for data fetching. The app runs with react-router
and react-router-redux
and has a config folder:
// project folder structure
src
| - client
| | - components
| | - config
| | | - store.js
| | | ...
| | - containers
| | - middlewares
| | | - reactRouterDataLoading.js // <-- this file must be written by yourself.
// It is responsible to trigger the epics for the requested page url
// and reacts on react-router-redux action-types which are fired
// by the middleware of this library
| | - modules
| - server
| | - index.js
Server
// express server... app
Client
To make ssr with redux-observables
work, we have to configure the store:
// store.js...// this mock is needed for the client.js to work const initalOptions = middlewares: epicOptions: dependencies: SSR_DEPENDENCIES_MOCK history: nullconst configureStore = { let middlewares = ... // hand over the instance of the SSR object (namend reduxObservablesSSR in the server implementation) // to the epic middleware as dependency. // This will make the object available in all of your epic's as third argument. middlewares = ...middlewares ... // its important that the ssr middleware stands at the last place of the array if _optionsmiddlewareslength > 0 middlewares = ...middlewares ..._optionsmiddlewares const store = return store}