如何在React-Redux中将状态消毒器与现有中间件相结合

import { createSelector } from 'reselect';

// 假设我们有一个简单的reducer和store设置
const initialState = {
  items: []
};

function itemsReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, action.payload] };
    default:
      return state;
  }
}

// 创建一个选择器
const getItems = createSelector(
  (state) => state.items,
  (items) => items.filter(item => item.active)
);

// 创建一个中间件
const selectorMiddleware = (store) => (next) => (action) => {
  // 在这里你可以使用选择器来处理数据
  const items = getItems(store.getState());
  console.log('Filtered Items:', items);

  // 继续处理action
  return next(action);
};

// 应用中间件
const store = createStore(
  itemsReducer,
  applyMiddleware(selectorMiddleware)
);

// 分发一个action
store.dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'Item 1', active: true } });