看起来你的问题主要出在dispatch的调用方式以及本地state与Redux state的同步逻辑上，还有一个潜在的状态路径匹配问题，我来一步步帮你解决：

1. 修正Dispatch的调用方式 #

你当前的dispatch写法是错误的：

dispatch({type: setFilterType, payload: i});

Redux Toolkit的createSlice已经帮你生成了封装好的action creator函数，不需要手动构建{type, payload}对象。正确的调用方式是直接传入action creator并传递payload：

onClick={() => {
  dispatch(setFilterType(i));
}}

2. 解决本地State与Redux State的同步问题 #

你在组件里同时使用了Redux的filterState和本地useState的filter，但useState的初始值只会在组件挂载时生效一次。当Redux的filter_type更新后，本地的filter.type不会自动同步，这会导致UI显示的状态和Redux状态不一致。

方案一：完全用Redux管理所有筛选状态（推荐） #

既然筛选状态是全局需要的（比如多个组件可能用到），把所有筛选字段都移到Redux里更合理：

• 更新你的slice的初始状态：

export const initialState = {
  filter_type: "outgoing",
  sources: {
    type: "all",
    items: []
  },
  assets: [],
  dates: {
    type: "all",
    from: "",
    to: "",
  },
  category: "all",
}

• 添加更新其他筛选字段的reducer（如果需要），或者修改setFilterType为更通用的action，比如updateFilter：

reducers: {
  updateFilter: (state, {payload}) => {
    // 合并传入的筛选字段到state
    return {...state, ...payload};
  }
}

• 组件里直接从Redux获取完整的筛选状态，不再使用本地useState：

const filter = useSelector(state => state.transaction_filter); // 确保路径正确

方案二：保留本地State，同步Redux状态变化 #

如果你想保留本地state，需要用useEffect监听Redux状态的变化，手动更新本地state：

useEffect(() => {
  setFilter(prevFilter => ({
    ...prevFilter,
    type: filterState
  }));
}, [filterState]); // 当filterState变化时触发更新

3. 检查状态路径是否匹配 #

你的selector里写的是：

const baseState = (state) => state.transaction_filter;

请确认你在store配置中，reducer的注册key确实是transaction_filter：

// store.js示例
import { configureStore } from '@reduxjs/toolkit';
import transactionFilterReducer from './transactionFilterSlice';

export const store = configureStore({
  reducer: {
    transaction_filter: transactionFilterReducer, // 这里的key要和selector里的一致
  },
});

如果注册时用的是transactionFilter（比如transactionFilter: transactionFilterReducer），那selector里要改成state.transactionFilter，否则会取不到正确的状态值。

4. 修正UI中的变量引用问题 #

你的JSX里用了type === i，但组件里并没有定义type变量，应该改成filter.type === i：

<div className={`tx-type-item ${filter.type === i ? 'selected' : ''}`} key={i} onClick={() => {
  dispatch(setFilterType(i));
}}>

做完这些修改后，点击按钮应该就能正确更新Redux状态，并且UI会同步响应了。

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