在 Redux 中访问中间件中的状态

我的 React/Redux 应用程序中有一个中间件，如下所示：

export const myMiddleware = (store) => (next) => async (action) => {

   switch (action.type) {
      case types.SOME_ACTION:
      // Some logic here...
      break;
   }
}

我需要访问这里的状态，以便我可以执行这个中间件旨在处理的逻辑。

我想，因为商店被传递到中间件中，所以我可以访问它，但是当我检查商店时，我根本看不到状态。我确实看到了getState()函数，但当我使用它时，看起来它为我提供了初始状态，而不是其中包含数据的当前状态。

Here's the store object I see when I inspect it:

这是我的商店以及我如何在其中包含中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers/root-reducer';
import { myMiddleware } from '../middleware/my-middleware';

export default function configureStore(initialState) {

    const store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk, myMiddleware)
    );

    return store;
}

如何访问中间件中的状态？

如果您使用，您可以在中间件中获取更新的状态（当前操作之后）getState()在异步回调中（例如 signalR 响应）。在这种情况下，我用过setTimeout()模拟异步操作。

Note:

1. 尽管这在理论上可行，但这并不是一个好主意。无法保证其他操作不会改变状态。在示例中，您可以看到中间件显示了两个操作的两个分派操作的最终状态。
2. 关于评论中的讨论 - 简单的状态更改应该在减速器中完成，而不是在中间件中完成。

const { createStore, applyMiddleware } = Redux;

const DEMO_ACTION = 'DEMO_ACTION';

const demoAction = (payload) => ({
  type: DEMO_ACTION,
  payload
});

const myMiddleware = ({ getState }) => (next) => async (action) => {
  setTimeout( // simulates an async action
    () => console.log(action.payload, getState())
  , 0);
   
  next(action);
}

const initialState = { data: [] };

const rootReducer = (state = initialState, { type, payload }) => {
  switch(type) {
    case DEMO_ACTION:
      return {
        ...state,
        data: [...state.data, payload]
      };
  }
  
  return state;
}

const store = createStore(
  rootReducer,
  applyMiddleware(myMiddleware)
);

store.dispatch(demoAction('data1'));
store.dispatch(demoAction('data2'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>