我正在尝试在使用Thunk和connected-react-router的React Redux Electron应用程序中创建一个简单的Redux中间件。
在myMiddleware.js中，我们需要访问Redux存储和dispatch函数来发送一些操作。但是，getState和dispatch是undefined，如下面的代码所示。
在自定义Redux中间件中访问两者的正确方法是什么？
Github存储库： https://github.com/nyxynyx/accessing-store-dispatch-from-redux-middleware
middleware / myMiddleware.js
const myMiddleware = () => {
return ({ getState, dispatch }) => {
console.log(getState) // undefined
console.log(dispatch) // undefined
return next => action => {
return next(action);
}
}
}
store.js
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);
}
index.js
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")
);
使用