使用redux-saga反应服务器端渲染

Question

I have saga implemented as

import { put, takeLatest } from 'redux-saga/effects';
import axios from 'axios';

import { FETCH_CARD_LIST_DATA_FROM_API, SET_CARD_LIST  } from 
'./CardList.actions';
import constants from '../../../../constants';

export default function * fetchCardListSaga(){
 yield takeLatest(FETCH_CARD_LIST_DATA_FROM_API, fetchDataFromAPI)
}



function * fetchDataFromAPI(action){
const { payload } = action;
const response = yield 
axios.get(`${constants.API_URL}/hotels/${payload[0]}/${payload[1]}`);
  console.log('data recieved from api server', response.data.length);
if(response.status === 200){
  yield put({
    type: SET_CARD_LIST,
    payload: response.data
  });
 }
}

At server.js

const sagaMiddleWare = createSagaMiddleware();
const store =  createStore(rootReducer, initialState, 
applyMiddleware(sagaMiddleWare));
sagaMiddleWare.run(fetchCardListSaga);

Now how do i dispatch action so that the data is fetched from API server and then i call res.send on server.

I know how to make it work at client side using react-redux. The problem on server side is how to dispatch action and how to wait before sending response from server till store is updated.

Answer 1

Tricky.

You can dispatch actions by getting your store reference and calling store.dispatch , but you can't wait on the saga. And you can't call the saga manually and yield on it, as it depends on the saga middleware.

I would put the request in a helper function and do that data fetching on the server without the saga and dispatch this way the response. And use the same helper function in the saga.

Honestly, I wouldn't use middlewares for SSE.