need help, SSR not working with Redux Saga

[Lokesh235]

Hi,

I integrated redux-saga in place of thunk in the code base. Content from API is getting rendered on page but on view page source there is nothing but the static content and also state is empty. I am not able to get what am I missing here. Following are the code changes:

In store.js, replaced thunk with saga,

import createSagaMiddleware, {END} from 'redux-saga';
...
...
const sagaMiddleware = createSagaMiddleware();
const middleware = [routerMiddleware(history), sagaMiddleware];
...
...
// Create the store
const store = createStore(
connectRouter(history)(rootReducer),
Immutable(initialState),
composedEnhancers
);

sagaMiddleware.run(rootSaga);

store.runSaga = sagaMiddleware.run;
store.close = () => store.dispatch(END);

return {
store,
history
};

========================================================

In loader.js,

...
...
else {
// Otherwise, we carry on...
store.runSaga(rootSagas).done.then(() => {
// Let's give ourself a function to load all our page-specific JS assets for code splitting
const extractAssets = (assets, chunks) =>
Object.keys(assets)
.filter(asset => chunks.indexOf(asset.replace('.js', '')) > -1)
.map(k => assets[k]);

                        // Let's format those assets into pretty <script> tags
                       const extraChunks = extractAssets(manifest, modules).map(
                            c => `<script type="text/javascript" src="/${c.replace(/^\//, '')}"></script>`
                       );

                        // We need to tell Helmet to compute the right meta tags, title, and such
                        const helmet = Helmet.renderStatic();

                       // NOTE: Disable if you desire
                       // Let's output the title, just to see SSR is working as intended
                       console.log('THE TITLE', helmet.title.toString());
                       console.log('STATE ===>', JSON.stringify(store.getState()));

                       // Pass all this nonsense into our HTML formatting function above
                       const html = injectHTML(htmlData, {
                       html: helmet.htmlAttributes.toString(),
                       title: helmet.title.toString(),
                       meta: helmet.meta.toString(),
                       body: routeMarkup,
                       scripts: extraChunks,
                       state: JSON.stringify(store.getState()).replace(/</g, '\\u003c'),
                       styleTags,
                     });

                     // We have all the final HTML, let's send it to the user already!
                     res.send(html);
                });

                 store.close();
   }

I would really appreciate if someone can help me out with this.

Thanks :)

[cereallarceny]

Hey, my apologies for the long wait @Lokesh235 - I'm looking to ensure this is fixed with version 2.0. If you're interested, I could really use your thoughts for what you'd like to see in the upcoming version. Feel free to comment on the issue here with any suggestions. :)

[worksbyabhi]

@Lokesh235
I've implemented redux-saga replacing thunk in @cereallarceny cra-ssr project and its working fine for me.

Changes I've made
--------store.js--------
import { watchStatus } from './sagas/index';

const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;
// I just want enhancer to work if available so not checking for environment
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware, routerMiddleware(history)];

const store = createStore(
rootReducer(history),
initialState,
composeEnhancers(applyMiddleware(...middleware))
);

sagaMiddleware.run(watchStatus);

return {
store,
history
};

--------/sagas/index.js--------
import { takeEvery } from 'redux-saga/effects';

import * as actionTypes from '../actionTypes';

import { testSaga } from './testSaga';

export function* watchStatus() {
yield takeEvery(actionTypes.TEST_SAGA, testSaga);
}

--------/testSaga.js--------
import { put } from "redux-saga/effects";

import * as actionTypes from "../actionTypes";

export function* testSaga(action) {
try {
// some task
yield put({
...action,
type: actionTypes.TEST
})
} catch (err) {
console.log(err);
}
}

--------actionTypes.js--------
export const TEST = 'TEST';
export const TEST_SAGA = 'TEST_SAGA';

[cereallarceny]

👍