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

Question

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

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

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

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

我想，因为商店被传递到中间件中，所以我可以访问它，但是当我检查商店时，我根本看不到状态。我确实看到了一个

getState()

函数，但是当我使用它时，看起来它给我的是初始状态，而不是包含数据的当前状态。

这是我检查时看到的

store

对象：

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

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;
}

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

Answer 1

如果您在异步回调（例如 signalR 响应）中使用

getState()

，则可以在中间件中获取更新的状态（当前操作之后）。在本例中，我使用

setTimeout()

来模拟异步操作。

注意：

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>

Answer 2

从RootState读取切片数据

我想在使用 RTK 查询（中间件）时提供额外的标头。使用 Typescript，我像这样向下导航状态对象：

const accessToken = (getState() as RootState).appConfig.accessToken

（

appConfig

是我在启动时使用登录数据初始化的切片）