2

我正在尝试将我的 react 应用程序迁移到 next.js 应用程序。

  1. 我喜欢 redux-saga
  2. 我喜欢 redux-saga 逻辑中的路由
  3. 而且我想像以前一样在 redux-saga 逻辑中进行路由！

但我无法弄清楚如何做到这一点。问题是..

  1. 如何在 Next.js 中使用 redux-saga 逻辑进行路由？
  2. 这是不好的做法吗？我认为将路由逻辑放在 saga 上似乎更合理。但我认为这不是一种流行的方式。为什么很多人不使用它？

帮助了解我的情况。我通常在反应应用程序中进行路由，如下所示

我的传奇逻辑之一作为示例

export function* deletePost(action) {
  const { postId } = action;
//delete post 
  yield api.postApi.deletePost(postId);
//route page to home ("/")
  yield put(actions.router.push("/"));
}

我使用'connected-react-router'来做到这一点。和 actions.router 从下面的文件中导出。

import { routerActions as router } from "connected-react-router"
export { router }

下面是我如何配置我的 redux 商店

import { applyMiddleware, compose, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { composeWithDevTools } from "redux-devtools-extension";

import { createRootReducer } from "data/rootReducer";
import rootSaga from "data/rootSaga";

const history = createBrowserHistory();
const sagaMiddleware = createSagaMiddleware();
const rootReducer = createRootReducer(history);

const env = process.env.NODE_ENV;
let composeFn = composeWithDevTools;
if (env === "production") {
  composeFn = compose;
}
export default function configureStore() {
  const store = createStore(
    rootReducer,
    composeFn(applyMiddleware( sagaMiddleware, routerMiddleware(history)))
  );

  sagaMiddleware.run(rootSaga);

  return { history, store };
}
4

0 回答 0