我有一个React Web应用程序,它使用redux、connected-react-router、redux saga和redux persist以及带有react-hot-loader和webpack的HMR。对大多数软件包进行重大更新后,我注意到传奇没有输入/执行。
相关软件包的当前版本是: “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 恢复到较低版本,但我相信这是有效的。我还认为这可能是连接 react 路由器实现,但我现在对此也很有信心(但我将展示两者以供引用)。我猜这是我的 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);
根 reducer :
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;
授权传奇:
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 内的控制台日志能够运行,但它从来没有运行。我相信问题出在商店配置上,但此时我正在猜测并捕获救命稻草,因为我不知道该去哪里寻找。我知道这是一个复杂的问题,我感谢任何人可以提供的帮助。提前致谢!!
最佳答案
升级 redux saga 的问题出在 root saga 中。 我的解决方案是使用yield all,如下所示:
import { all } from 'redux-saga/effects';
import watchAuthentication from './auth/sagas';
const root = function* rootSaga() {
yield all([
watchAuthentication(),
]);
};
export default root;
希望这可以帮助别人。
关于reactjs - Redux Sagas 未使用 redux persist 和connected-react-router 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54761512/