Redux Toolkit中Reducer间状态共享的最优方案探讨

我正在规划首个React应用的架构，该应用包含多个状态切片（slice），同时存在会影响其他切片的全局状态。我希望找到切片间建立关联的最佳方式，最初想到的方案是使用middleware。

示例代码如下：

export const store = configureStore({
  reducer: {
    posts: postsReducer, // { posts: [] }
    user: userReducer // { blocked: true }
  },
  middleware: [userValidation]
})

我希望在用户处于封禁（blocked）状态时，禁止添加帖子。请问我应该使用middleware来实现这个需求吗？

对应的中间件代码如下：

export default const userValidation = store => next => action => {

    const { user } = store.getState()

    if (action.type === 'posts/add' && user.blocked) {
        store.dispatch(someWarning())
    } else {
        next()
    }
}

我担心后续会出现大量包含过多逻辑与判断的中间件，同时也顾虑性能问题，想请教这种实现方式是否合适？

你的中间件方案可行，但并非最优选择 #

用中间件实现这个需求技术上是可行的，但确实会带来你担心的问题：

• 随着业务逻辑增多，中间件会逐渐膨胀成各种判断逻辑的“大杂烩”，难以维护和调试
• 每次dispatch都会触发中间件执行，单次性能影响虽可忽略，但大量这类中间件叠加后，会增加不必要的状态检查开销

更推荐的替代方案 #

1. 在组件层做判断

直接在触发posts/add动作的组件里，先获取用户状态再决定是否执行添加操作：

// 组件内部
const { user } = useSelector(state => state.user)
const dispatch = useDispatch()

const handleAddPost = () => {
  if (user.blocked) {
    dispatch(someWarning())
    return
  }
  dispatch(addPost(newPost))
}

优点：逻辑贴近触发点，直观易维护；只在需要的地方做检查，无全局额外开销。

2. 封装自定义Action Creator

把判断逻辑封装到Action Creator里，组件直接调用这个封装后的方法：

// posts slice的action creators
export const addPostIfAllowed = (post) => (dispatch, getState) => {
  const { user } = getState()
  if (user.blocked) {
    dispatch(someWarning())
    return
  }
  dispatch(addPost(post))
}

// 组件内调用
dispatch(addPostIfAllowed(newPost))

优点：逻辑集中管理，组件无需关心判断细节；利用Redux Thunk（configureStore默认已包含）即可实现，无需额外中间件。

3. 在Reducer层面拦截（不推荐）

虽然可以在postsReducer里检查user状态，但Redux的设计原则是reducer应该是纯函数，依赖外部状态会破坏这一原则，导致逻辑难以追踪和测试，所以不建议这么做。

总结 #

如果只是单一的这类判断，中间件也能凑合用，但从长期维护和性能角度，优先选择组件层判断或封装Action Creator的方案。中间件更适合处理全局通用的横切逻辑（比如日志、API请求统一处理），而非这种特定业务场景的状态关联判断。

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