1

Store.js

import { persistStore, persistReducer } from "redux-persist";
import { configureStore } from "@reduxjs/toolkit";
import storageSession from "redux-persist/es/storage/session";
import {
  routerHistoryMiddleware,
  sagaMiddleware,
} from "./Container/Middleware";
import history from "./Container/History";
import rootReducer from "./Reducer";
const persistedReducer = persistReducer(persistConfig, rootReducer(history));
const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.NODE_ENV !== "production",
  middleware: [sagaMiddleware, routerHistoryMiddleware],
});

Reducer.js

import { connectRouter } from "connected-react-router";
import { combineReducers } from "redux";
import { Auth } from "../Reducer/Auth";
export default (history) =>
  combineReducers({
    router: connectRouter(history),
    Auth,
  });

the connected-react-router is incompatibility with history 5.3.0???? i don't have idea...

index.js (routing) 

const persistor = persistStore(store);
sagaMiddleware.run(rootSaga);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </PersistGate>
  </Provider>
);

package.json

I installed the Redux DevTools and found this step has problem. problem

Saga.js (below is about SSO login) i tried to add consolog.log and cannot display... so that i think the problem is here... 

export function* locationChangeWatcher() {
  yield all([takeLatest(LOCATION_CHANGE, locationChangeWorker)]);
}

function* locationChangeWorker(action) {
  const state = yield select((state) => state);
 
  
  const prevPathname = state.Context.renderPath;
  const nextPathname = action.payload.location.pathname;

  let query = new URLSearchParams(action.payload.location.search);
  let ticket = query.get("ticket");

  if (!ticket && !window.sessionStorage.getItem("st")) {
    window.location.assign(
      SSO_URL +
        "/cas/login?service=" +
        encodeURIComponent(window.location.href.replace("#", ""))
    );
  }
  if (window.location.pathname.split("/")[1] != "") {
    yield put(getAccess.request());
  }
  if (ticket) {
    window.sessionStorage.setItem("st", ticket);
    yield put(initAppl.request());
    query.delete("ticket");
    history.push(window.location.pathname + "?" + query.toString());
  } else {
    if (prevPathname != nextPathname) {
      yield put(renderPathChange({ renderPath: nextPathname }));
      if (
        prevPathname != getContextPath() &&
        nextPathname != getContextPath()
      ) {
        yield put(reset());
      }
    }
  }
}
user1190842
  • 11
  • 2
  • What version of `react-router` or `react-router-dom` is installed? `history@5` is compatible with `react-router@6` which `connected-react-router` is yet to be updated to work with. `connected-react-router` also appears to be currently unmaintained. Can you [edit] to include more of your project dependencies and any more of the relevant redux and router/routing/history code as part of a more complete [mcve]? – Drew Reese Apr 03 '23 at 15:36
  • `connected-react-router` isn't compatible with `react-router-dom@6`. You can either revert back to `react-router-dom@5` (*w/ `history@4`*) or switch to [`redux-first-history`](https://www.npmjs.com/package/redux-first-history) and use the RRDv6 `HistoryRouter` and custom history object (`history@5`). – Drew Reese Apr 04 '23 at 05:14
  • My answer [here](https://stackoverflow.com/a/73628683/8690857) might be helpful. – Drew Reese Apr 04 '23 at 05:16
  • I reverted back to react-router-dom@5 and history@4. it works.... thanks a lot. – user1190842 Apr 06 '23 at 01:27

0 Answers0