У меня есть веб-приложение для реагирования, которое использует 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 запустится, но этого не происходит. Я считаю, что проблема связана с конфигурацией магазина, но на данный момент я гадаю и хватаюсь за соломинку, потому что не знаю, где искать. Я знаю, что это сложный вопрос, и ценю любую помощь, которую может предоставить каждый. Заранее спасибо!!