У меня есть реагирующее веб-приложение, которое использует редукс, подключенный-реагирующий-маршрутизатор, саго-редукс и постоянный редукс, а также HMR с реагирующим горячим загрузчиком и веб-пакетом.После значительного обновления большинства пакетов я заметил, что саги не вводятся / не выполняются.
Текущие версии соответствующих пакетов: «реагировать»: «^ 16.7.0», «реагироватьredux ":" ^ 6.0.0 "," redux ":" ^ 4.0.1 "," redux-persist ":" 5.6.12 "," redux-saga ":" ^ 1.0.1 "," Reaction-hot-loader ":" ^ 4.6.5 "," connected-реакции-router ":" ^ 6.2.2 "," webpack ":" ^ 4.29.3 ".
Я попытался отменить реализацию HMRот v4 до чего-то ниже, но я уверен, что работает.Я также подумал, что это может быть реализация подключенного реагирующего маршрутизатора, но я также уверен в этом сейчас (но я покажу оба для справки).Я предполагаю, что это что-то вроде конфигурации моего магазина приставок, но я думаю, если бы знал, что не буду обращаться за помощью.
файл 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, но он этого не делает.Я полагаю, что проблема заключается в конфигурации магазина, но на данный момент я угадываю и цепляюсь за соломинку, потому что я не знаю, где искать.Я знаю, что это сложный вопрос, и я ценю любую помощь, которую может оказать любой.Заранее спасибо !!