Redux Sagas, не входящие с redux persist и connected-response-router

У меня есть веб-приложение для реагирования, которое использует redux, connected-response-router, redux saga и redux persist и HMR с response-hot-loader и webpack. После крупного обновления большинства пакетов я заметил, что саги не вводятся / не выполняются.

Текущие версии соответствующих пакетов: «react»: «^ 16.7.0», «react-redux»: «^ 6.0.0», «redux»: «^ 4.0.1», «redux-persist»: "5.6.12", "redux-saga": "^ 1.0.1", "react-hot-loader": "^ 4.6.5", "connected-react-router": "^ 6.2.2", " webpack ":" ^ 4.29.3 ".

Я попытался вернуть реализацию HMR с v4 на что-то более низкое, но уверен, что это работает. Я также подумал, что это может быть реализация маршрутизатора connected-response-router, но теперь я также уверен в этом (но я покажу оба варианта для справки). Я предполагаю, что это что-то связано с моей конфигурацией хранилища redux, но я думаю, если бы я знал, я бы не просил о помощи.

index.js файл (точка входа в приложение)

import React from 'react';
import ReactDOM from 'react-dom';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import App from './components/App';
import store, { persistor } from './store/config';

const render = (Component) => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Component />
      </PersistGate>
    </Provider>,
    document.getElementById('app'),
  );
};

render(App);

корневой редуктор:

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { stateKeys } from '../types';
import authReducer from './auth/authReducer';

export default history => combineReducers({
  [stateKeys.ROUTER]: connectRouter(history),
  [stateKeys.AUTH]: authReducer,
});

корневая сага:

import watchAuthentication from './auth/sagas';

const root = function* rootSaga() {
  yield [
    watchAuthentication(),
  ];
};

export default root;

App.js (только соответствующие биты):

import { hot } from 'react-hot-loader';
class App extends React.Component {
...
}
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(App));

конфигурация магазина:

import {
  applyMiddleware,
  compose,
  createStore,
} from 'redux';
import createSagaMiddleware from 'redux-saga';
import { createMigrate, persistStore, persistReducer } from 'redux- 
persist';
import storage from 'redux-persist/lib/storage';
import reduxImmutableStateInvariant from 'redux-immutable-state- 
invariant';
import { createBrowserHistory } from 'history';
import { routerMiddleware } from 'connected-react-router';
import { manifest } from '../manifest';
import rootReducer from '../rootReducer';
import sagas from '../rootSaga';
import { stateKeys } from '../../types';


// persistence config
const persistConfig = {
  key: 'root',
  whitelist: [
    stateKeys.MANIFEST,
    stateKeys.VERSION,
  ],
  storage,
  migrate: createMigrate(manifest),
};

// Create and export the history object
export const history = createBrowserHistory();


// Middlewares setup
const reactRouterMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();

const middlewares = [];

// during development: enforce immutability and provide extended support for redux debugging tools.
let composeEnhancers = compose;

if (process.env.NODE_ENV === 'development') {
  middlewares.push(reduxImmutableStateInvariant());
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || 
composeEnhancers; // eslint-disable-line no-underscore-dangle, max-len
}

middlewares.push(sagaMiddleware, reactRouterMiddleware);

// create the redux store
const initialState = undefined;

const store = createStore(
  persistReducer(persistConfig, rootReducer(history)),
  initialState,
  composeEnhancers(applyMiddleware(...middlewares)),
);

// hot module replacement config
if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept('../rootReducer', () => {
    const nextReducer = require('../rootReducer').default; // eslint-disable-line global-require
    store.replaceReducer(persistReducer(persistConfig, 
nextReducer(history)));
  });
}

// run the saga middleware
sagaMiddleware.run(sagas);

export const persistor = persistStore(store);
export default store;

Auth Saga:

import {
  call,
  take,
  takeLatest,
} from 'redux-saga/effects';
import * as actions from '../authActions';
import config from '../../../mockData/mock-config';

// Use mocked auth flow if mocked authentication is enabled in mock- 
   config.js.
   // If mocked auth is used, you can change the user object in the 
    mock-config.js
    const { authenticateFlow, signOutFlow } = (config.enabled && 
    config.mockAuthentication) ? require('./mockedAuthFlow') : 
    require('./authFlow');

console.log('Outside watchAuthentication: sagas are not 
running...why?');


export default function* watchAuthentication() {
  while(true) { // eslint-disable-line
    try {
      console.log('Inside watchAuthentication... we never get here, 
why? ');

      const loginAction = yield takeLatest(`${actions.login}`);
      yield call(authenticateFlow, loginAction);

      const signOutAction = yield take(`${actions.loginSignOut}`);

      yield call(signOutFlow, signOutAction);
    } catch (e) {
      console.warn('login flow failed');
    }
  }
}

Я ожидал, что журнал консоли внутри watchAuthentication запустится, но этого не происходит. Я считаю, что проблема связана с конфигурацией магазина, но на данный момент я гадаю и хватаюсь за соломинку, потому что не знаю, где искать. Я знаю, что это сложный вопрос, и ценю любую помощь, которую может предоставить каждый. Заранее спасибо!!


person cbutler    schedule 19.02.2019    source источник
comment
Я заметил, что переход от redux-saga redux-saga: ^ 0.15.6 к redux-saga: ^ 1.0.1 вызывает критическое изменение, но не знаю почему. Я буду продолжать расследование, если кто-то еще столкнется с этой проблемой.   -  person cbutler    schedule 19.02.2019
comment
Вы когда-нибудь выясняли, из-за чего ваши часы перестали работать?   -  person Plague    schedule 08.05.2020
comment
Сделал, добавлю ответ   -  person cbutler    schedule 09.05.2020


Ответы (1)


Проблема с этой проблемой при обновлении саги redux была в корневой саге. Мое решение заключалось в том, чтобы использовать yield all следующим образом:

import { all } from 'redux-saga/effects';
import watchAuthentication from './auth/sagas';

const root = function* rootSaga() {
  yield all([
    watchAuthentication(),
  ]);
};

export default root;

Надеюсь, это кому-то поможет.

person cbutler    schedule 09.05.2020