Javascript 无法从Redux中间件访问存储和分派

我正在尝试在我的React-Redux电子应用程序中创建一个简单的Redux中间件，它使用Thunk和连接的React路由器

在

myMiddleware.js

中，我们需要访问Redux存储和

dispatch

函数来发送一些操作。但是，

getState

和

dispatch

是

未定义的

，如下代码所示

在自定义Redux中间件中访问这两个组件的正确方法是什么

Github回购：

中间件/myMiddleware.js

const myMiddleware = () => {
    return ({ getState, dispatch }) => {
        console.log(getState)       // undefined
        console.log(dispatch)       // undefined

        return next => action => {
            return next(action);
        }
    }
}

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { connectRouter, routerMiddleware, push } from 'connected-react-router';
import persistState from 'redux-localstorage';
import thunk from 'redux-thunk';

import myMiddleware from './middleware/myMiddleware';

export default function configureStore(initialState, routerHistory) {
    const router = routerMiddleware(routerHistory);

    const actionCreators = {
      push,
    };

    const reducers = {
      router: connectRouter(routerHistory),
    };

    const middlewares = [myMiddleware, thunk, router];

    const composeEnhancers = (() => {
      const compose_ = window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
      if (process.env.NODE_ENV === 'development' && compose_) {
        return compose_({ actionCreators });
      }
      return compose;
    })();

    const enhancer = composeEnhancers(applyMiddleware(...middlewares), persistState());
    const rootReducer = combineReducers(reducers);

    return createStore(rootReducer, initialState, enhancer);
 }

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { createMemoryHistory } from 'history';
import routes from './routes';
import configureStore from './store';

const syncHistoryWithStore = (store, history) => {
  const { router } = store.getState();
  if (router && router.location) {
    history.replace(router.location);
  }
};

const initialState = {};
const routerHistory = createMemoryHistory();
const store = configureStore(initialState, routerHistory);
syncHistoryWithStore(store, routerHistory);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

store.js

const myMiddleware = () => {
    return ({ getState, dispatch }) => {
        console.log(getState)       // undefined
        console.log(dispatch)       // undefined

        return next => action => {
            return next(action);
        }
    }
}

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { connectRouter, routerMiddleware, push } from 'connected-react-router';
import persistState from 'redux-localstorage';
import thunk from 'redux-thunk';

import myMiddleware from './middleware/myMiddleware';

export default function configureStore(initialState, routerHistory) {
    const router = routerMiddleware(routerHistory);

    const actionCreators = {
      push,
    };

    const reducers = {
      router: connectRouter(routerHistory),
    };

    const middlewares = [myMiddleware, thunk, router];

    const composeEnhancers = (() => {
      const compose_ = window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
      if (process.env.NODE_ENV === 'development' && compose_) {
        return compose_({ actionCreators });
      }
      return compose;
    })();

    const enhancer = composeEnhancers(applyMiddleware(...middlewares), persistState());
    const rootReducer = combineReducers(reducers);

    return createStore(rootReducer, initialState, enhancer);
 }

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { createMemoryHistory } from 'history';
import routes from './routes';
import configureStore from './store';

const syncHistoryWithStore = (store, history) => {
  const { router } = store.getState();
  if (router && router.location) {
    history.replace(router.location);
  }
};

const initialState = {};
const routerHistory = createMemoryHistory();
const store = configureStore(initialState, routerHistory);
syncHistoryWithStore(store, routerHistory);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

index.js

const myMiddleware = () => {
    return ({ getState, dispatch }) => {
        console.log(getState)       // undefined
        console.log(dispatch)       // undefined

        return next => action => {
            return next(action);
        }
    }
}

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { connectRouter, routerMiddleware, push } from 'connected-react-router';
import persistState from 'redux-localstorage';
import thunk from 'redux-thunk';

import myMiddleware from './middleware/myMiddleware';

export default function configureStore(initialState, routerHistory) {
    const router = routerMiddleware(routerHistory);

    const actionCreators = {
      push,
    };

    const reducers = {
      router: connectRouter(routerHistory),
    };

    const middlewares = [myMiddleware, thunk, router];

    const composeEnhancers = (() => {
      const compose_ = window && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__;
      if (process.env.NODE_ENV === 'development' && compose_) {
        return compose_({ actionCreators });
      }
      return compose;
    })();

    const enhancer = composeEnhancers(applyMiddleware(...middlewares), persistState());
    const rootReducer = combineReducers(reducers);

    return createStore(rootReducer, initialState, enhancer);
 }

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'connected-react-router';
import { createMemoryHistory } from 'history';
import routes from './routes';
import configureStore from './store';

const syncHistoryWithStore = (store, history) => {
  const { router } = store.getState();
  if (router && router.location) {
    history.replace(router.location);
  }
};

const initialState = {};
const routerHistory = createMemoryHistory();
const store = configureStore(initialState, routerHistory);
syncHistoryWithStore(store, routerHistory);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={routerHistory}>{routes}</ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“已连接路由器”导入{ConnectedRouter}；
从“历史”导入{createMemoryHistory}；
从“./routes”导入路由；
从“/store”导入配置存储；
常数syncHistoryWithStore=（存储，历史）=>{
const{router}=store.getState（）；
if（路由器和路由器位置）{
历史。替换（路由器。位置）；
}
};
常量initialState={}；
const routerHistory=createMemoryHistory（）；
常量存储=配置存储（初始状态、路由历史）；
syncHistoryWithStore（商店、路由器历史）；
ReactDOM.render(
{routes}
,
document.getElementById（“根”）
);

使用

• 连接反应-router@6.8.0
• 反应-dom@16.13.1
• 反应-redux@7.2.0
• 反应路由器-dom@5.1.2
• 反应-router@5.1.2
• react@16.13.1
• 重演-localstorage@0.4.1
• 重演-thunk@2.3.0
• redux@4.0.5
• 节点v14.0.0