Redux Saga никогда не запускается

Question

Я пытаюсь настроить redux-saga v1.1.3 в моем приложении.

Я сделал с README здесь моя конфигурация ниже.

В моем проекте:

npm i redux-saga@1.1.3 --save

Я создал rootSaga.js следующим образом:

import { all } from 'redux-saga/effects'

export default (customSagas) => function* rootSaga() {
  yield all([
    ...customSagas,
  ])
}

Я превратил rootSaga.js в функцию, потому что rootSaga находится в ядре моего приложения и мне нужно было иметь возможность добавить больше customSaga в мое приложение.

Это мой обновленный configureStore.js:

import { routerMiddleware } from 'connected-react-router';
import {
  createStore,
  applyMiddleware,
  compose,
} from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
+ import createSagaMiddleware from 'redux-saga';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
import { augmentStore } from '@nfen/redux-reducer-injector';

import storage from './storage';
import combineAppReducers from '../reducers';
+ import rootSagas from '../sagas';

function setupCreateReducer(customReducers = {}, reducerConfig) {
  return function createReducer() {
    return combineAppReducers({
      ...customReducers,
    }, reducerConfig);
  };
}

export default function configureStore(customReducers, customSagas, initialState = {}, persistConfig = {}, reducerConfig = {}) {
  const runtimePersistConfig = {
    key: 'root',
    stateReconciler: autoMergeLevel2,
    storage,
    ...persistConfig,
    whitelist: [
      'preferences',
      ...(persistConfig.whitelist || []),
    ],
  };

  let composeEnhancers = compose;
  const reduxSagaMonitorOptions = {};
  /* istanbul ignore next */
  if (__DEV__ && typeof window === 'object') { // eslint-disable-line no-undef
    /* eslint-disable no-underscore-dangle */
    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
    }
    /* eslint-enable */
  }

+  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
-  const middlewares = combineAppMiddlewares([], reducerConfig.history);
+  const middlewares = combineAppMiddlewares([sagaMiddleware], reducerConfig.history);


-  const middlewares = [routerMiddleware(reducerConfig.history)];
+  const middlewares = [sagaMiddleware, routerMiddleware(reducerConfig.history)];

  const enhancers = [applyMiddleware(...middlewares)];

  const createReducer = setupCreateReducer(customReducers, reducerConfig);
  const persistedReducer = persistReducer(runtimePersistConfig, createReducer());
  const store = createStore(
    persistedReducer,
    initialState,
    composeEnhancers(...enhancers),
  );
  // Extensions
+  store.runSaga = sagaMiddleware.run;
+  store.runSaga(rootSagas(customSagas));

  augmentStore(createReducer, store);
  const persistor = persistStore(store);
  return { store, persistor };
}

Там я использую redux и redux-persist, я также настраиваю редукционные средства разработки. и имеют некоторые основные функции, такие как preferences, предварительно настроенный и постоянный

Это мой customSagas.js:

import sessionsSaga from './sessionsSaga';

export default [
  sessionsSaga,
];

Это мой sessionSaga.js:

import { takeLatest } from 'redux-saga/effects';

export function* logout() {
  console.log('hello world');
}

export default function* logoutSaga() {
  yield takeLatest('LOGOUT' , logout);
}

И вот как я называю сагу в моем JSX:

function App() {
    return (
        <Button
          push={() => dispatch({ type: 'LOGOUT' })}
        >
          Logout Saga
        </Button>
    );
}

Я вижу, что тип LOGOUT отправляется в моих инструментах для создания избыточных файлов, но я не вижу Привет, мир.

Где я терплю неудачу?

Answer 1

когда вы делаете yield all([...]) в rootSaga, вам нужно вызвать такие функции, как sessionSaga(). в вашем коде вы просто перечисляете функции генератора. см. root саги документы

я думаю, что-то вроде:

import { all, call } from 'redux-saga/effects'

export default (customSagas) => function* rootSaga() {
  yield all(customSagas.map(saga => call(saga)));
}

может работать.