настроить модульный способ redux saga

Я использую приложение create-response-app для своего проекта. Теперь, когда мне нужна redux-saga для асинхронной работы, я столкнулся с проблемой модульной настройки саг. Под модульным способом я имею в виду, что будет один главный файл саги, который будет экспортировать саги всех компонентов. например, есть 5 компонентов, компонент1, компонент2, компонент3, компонент4 и компонент5. У каждого компонента будут свои действия, редукторы, константы и саги. Как я могу так настроить?

Я мог бы сделать следующее, но как лучше всего справиться с этим?

Вот мой исходный код

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

person pythonBeginner    schedule 02.06.2017    source источник


Ответы (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.

Надеюсь это поможет.

person Nirmalya Ghosh    schedule 02.06.2017
comment
Я только что использовал этот шаблон вчера, и я фанат этого шаблона, но проблема в том, что я использую response-router v4 в другом проекте, поэтому у меня проблема с внедрением async saga. - person pythonBeginner; 02.06.2017