在Redux中访问中间件的状态

Question

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

int

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

我认为，因为商店正在传递到中间件中，所以我可以访问它，但是当我检查商店时，我根本看不到状态。我确实看到了一个numeric函数，但是当我使用它时，它看起来像是在获取初始状态，而不是包含数据的当前状态。

这是我检查时看到的export const myMiddleware = (store) => (next) => async (action) => { switch (action.type) { case types.SOME_ACTION: // Some logic here... break; } } 对象：

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

getState()

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

Answer 1

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

注意：

1. 尽管这在理论上可行，但这并不是一个好主意。无法保证其他操作不会改变状态。在该示例中，您可以看到中间件显示了两个动作的两个调度动作的结束状态。
2. 关于注释中的讨论-简单的状态更改应在reducer中完成，而不是在中间件中完成。

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>