react-redux-store.js

import { applyMiddleware, createStore } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension/developmentOnly";
import { routerMiddleware } from "connected-react-router";
import { createBrowserHistory } from "history";
import { createRootReducer } from "./reducers";

export const history = createBrowserHistory();

// Build the middleware for intercepting and dispatching navigation actions
const myRouterMiddleware = routerMiddleware(history);

const getMiddleware = () => {
  if (process.env.NODE_ENV === "production") {
    return applyMiddleware(thunk, myRouterMiddleware);
  } else {
    // Enable additional logging in non-production environments.
    return applyMiddleware(thunk, myRouterMiddleware, createLogger());
  }
};

export const store = createStore(
  createRootReducer(history),
  composeWithDevTools(getMiddleware())
);

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import { store, history } from "./store";

import { Route, Switch } from "react-router-dom";
import { ConnectedRouter } from "connected-react-router";

import "./index.css";
import App from "./components/App/index";

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Switch>
                    <Route path="/" component={App} />
                </Switch>
            </ConnectedRouter>
        </Provider>
    </React.StrictMode>,
    document.getElementById("root")
);

//reducers/index.js
import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";

export const createRootReducer = (history) => {
  return combineReducers({
    router: connectRouter(history),
  });
};

``
`