Question

我正在为我的项目使用create-react-app。现在我需要redux-saga进行异步操作，我面临着以模块化方式配置传真的问题。通过模块化的方式，我的意思是，将有一个主要的传奇文件将导出所有组件的传奇。例如，有5个组件，component1，component2，component3，component4和component5。每个组件都有自己的动作，减速器，常量和传奇。我该如何配置？

我可以采取以下方式，但处理此类问题的最佳方法是什么？

这是我的源代码

store.js

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootReducer from "../reducers";
import rootSaga from "../app/sagas";

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  return {
    ...createStore(rootReducer, applyMiddleware(sagaMiddleware)),
    runsaga: sagaMiddleware.run(rootSaga)
  };
};

sagas.js

import component1Saga from './component1/sagas';
import component2Saga from './component2/sagas';

export default function* appSaga() {
  yield [component1Saga, component2Saga];
}

Answer 1

要回答您的问题，请查看React Boilerplate如何做到这一点。

在他们的configureStore函数中，他们称他们的传奇（https://github.com/react-boilerplate/react-boilerplate/blob/master/app/store.js#L18）。您可以使用您的传奇扩展程序（如果有的话），例如https://github.com/react-boilerplate/react-boilerplate/blob/master/app/store.js#L42。

现在，您可以导出个人的传奇，例如https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/sagas.js。

您可以在https://github.com/react-boilerplate/react-boilerplate/blob/master/app/routes.js#L26等路线中注入传奇。但是，在此之前，你将不得不创建一些辅助函数来为你注入https://github.com/react-boilerplate/react-boilerplate/blob/master/app/utils/asyncInjectors.js#L77。

希望这有帮助。

配置redux saga模块化方式

1 个答案: