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

标签 javascript reactjs redux-saga

我已经将 saga 实现为

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
  });
 }
}

在 server.js

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

现在我如何分派(dispatch)操作以便从 API 服务器获取数据,然后我在服务器上调用 res.send。

我知道如何让它在 客户端使用 react-redux。服务器端的问题是如何调度操作以及如何在从服务器发送响应之前等待存储更新。

最佳答案

棘手。

您可以通过获取您的 store 引用并调用 store.dispatch 来调度操作,但您不能等待 saga。而且您不能手动调用 saga 并在其上 yield,因为它取决于 saga 中间件。

我会将请求放在辅助函数中,并在没有 saga 的情况下在服务器上获取数据并以这种方式发送响应。并在 saga 中使用相同的辅助函数。

老实说,我不会为 SSR 使用中间件。

关于javascript - 使用 redux-saga 响应服务器端渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55069893/

相关文章:

javascript - 无限幻灯片插件不适用于背景图像

javascript - 使用 NG-repeat 制作带有多个单选按钮的表单 : want to reset the value of all the radio buttons

javascript - "IONIC 3"页面添加html内容变量

javascript - 在 editorState 中选择特定文本

javascript - ES6 - 同时产量和返回

javascript - 无法让 Redux 在生成器函数中运行

javascript - 如何在安装 React 组件之前让 Saga 监视事件?

javascript - 使用javascript在页面加载时加载css隐藏图像作为背景图像

javascript - Firebase firestore 设置要记录的对象数组

javascript - 如何在react渲染中显示而不重新渲染,自动更改mobx存储实例的值?