配置REDX傳奇模塊化方式

Question

我正在爲我的項目使用create-react-app。現在我需要使用redux-saga進行異步操作，但我正面臨着以模塊化方式配置sagas的問題。通過模塊化的方式，我的意思是，將會有一個主要的sagas文件將導出所有組件的傳奇故事。例如有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。

希望這會有所幫助。