如何在Redux Toolkit的filterSlice中访问productsSlice的状态？

方法1：在Reducer中通过getState获取全局状态 #

如果需要在filterSlice的reducer逻辑里访问productsSlice的状态，可以利用getState参数（该参数能获取整个Redux store的状态）来实现。

修改后的filterSlice代码 #

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  filteredProduct: [],
};

export const filterSlice = createSlice({
  name: "filter",
  initialState,
  reducers: {
    // 初始化过滤列表：直接同步products数据
    initFilteredProducts: (state, action) => {
      const { products } = action.getState().products;
      state.filteredProduct = [...products];
    },
    // 带条件过滤：根据传入的条件筛选products
    filterProductsByCondition: (state, action) => {
      const { condition } = action.payload;
      const allProducts = action.getState().products.products;
      state.filteredProduct = allProducts.filter(item => item.includes(condition));
    }
  }
});

// 导出action供组件调用
export const { initFilteredProducts, filterProductsByCondition } = filterSlice.actions;
export default filterSlice.reducer;

方法2：在组件中通过useSelector获取状态后触发Action #

如果更倾向于在组件层处理状态组合，可以先通过useSelector分别获取products数据，再调用filterSlice的action将数据传入。

组件示例代码 #

import { useSelector, useDispatch } from 'react-redux';
import { initFilteredProducts } from './filterSlice';

function FilterPage() {
  const dispatch = useDispatch();
  const products = useSelector(state => state.products.products);

  // 初始化过滤列表
  const handleInitFilter = () => {
    dispatch(initFilteredProducts());
  };

  return (
    <button onClick={handleInitFilter}>初始化过滤列表</button>
  );
}

关键注意点 #

• 不要尝试在slice的initialState中直接跨slice获取状态：initialState在slice定义时就会执行，此时Redux store还未完成初始化，无法读取其他slice的状态。
• 如果需要实时同步products的变化，可以使用Redux Toolkit的createListenerMiddleware，监听productsSlice的状态变更事件，自动触发filteredProduct的更新。

内容的提问来源于stack exchange，提问作者Hosam Salah