Начало работы

Это руководство поможет вам настроить Sagun в вашем React приложении.

Установка

# Сначала установите peer зависимости:
npm install react react-dom redux react-redux redux-saga immutable

# Затем установите Sagun:
npm install @iiiristram/sagun

# Также рекомендуется установить для строго типизированных эффектов саг:
npm install typed-redux-saga

Конфигурация TypeScript

Sagun использует декораторы TypeScript. Включите их в tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Инициализация приложения

Ниже представлен пример типовой инициализации приложения на базе redux и redux-saga, и подсвечены строки, которые необходимо добавить, чтобы настроить работу фреймворка

// bootstrap.tsx
import { applyMiddleware, createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import React from 'react';
import ReactDOM from 'react-dom';
import { call } from 'typed-redux-saga';
import {
  ComponentLifecycleService,
  OperationService,
  asyncOperationsReducer,
  Root,
  useOperation,
} from '@iiiristram/sagun';

import {App} from './App';

// 1. Создаём saga middleware
const sagaMiddleware = createSagaMiddleware();

// 2. Создаём Redux store с reducer для операций
const store = applyMiddleware(sagaMiddleware)(createStore)(
  combineReducers({
    asyncOperations: asyncOperationsReducer,
  })
);

// 3. Настраиваем путь к операциям в state
useOperation.setPath(state => state.asyncOperations);

// 4. Создаём основные сервисы
const operationService = new OperationService();
const componentLifecycleService = new ComponentLifecycleService(operationService);

// 5. Запускаем saga middleware с основными сервисами
sagaMiddleware.run(function* () {
  yield* call(operationService.run);
  yield* call(componentLifecycleService.run);
});

// 6. Рендерим приложение
ReactDOM.render(
  <Root 
    operationService={operationService} 
    componentLifecycleService={componentLifecycleService}
  >
    <Provider store={store}>
      <App />
    </Provider>
  </Root>,
  document.getElementById('app')
);