React-Redux：动作完成后更新状态中通知数组的最佳实践咨询

你遇到的这个问题很常见——既要保证通知在状态变更后添加，又不想在每个reducer里写重复代码。下面是几个经过验证的方案，按推荐程度排序：

1. 使用Redux Toolkit的createListenerMiddleware（首选） #

Redux Toolkit（RTK）自带的listenerMiddleware就是专门用来处理动作被reducer处理完成后的副作用逻辑，完美匹配你的需求。它允许你监听特定的action类型，当这些action被成功处理（状态已更新）后，自动触发添加通知的逻辑，完全不用在业务reducer或action creator里重复代码。

实现步骤： #

1. 首先创建一个listener middleware实例：

import { createListenerMiddleware } from '@reduxjs/toolkit';

export const listenerMiddleware = createListenerMiddleware();

2. 添加监听器，监听你需要触发通知的业务动作（比如loginSuccess、addItemSuccess）：

listenerMiddleware.startListening({
  actionCreator: loginSuccess, // 这里是你的登录成功action creator
  effect: async (action, listenerApi) => {
    // 此时reducer已经处理完loginSuccess动作，状态已更新
    listenerApi.dispatch(
      addNotification({
        type: 'success',
        message: '登录成功！'
      })
    );
  }
});

listenerMiddleware.startListening({
  actionCreator: addItemSuccess, // 添加项目成功的action creator
  effect: (action, listenerApi) => {
    listenerApi.dispatch(
      addNotification({
        type: 'success',
        message: `项目${action.payload.name}添加成功！`
      })
    );
  }
});

3. 将这个middleware添加到你的store中：

import { configureStore } from '@reduxjs/toolkit';
import { listenerMiddleware } from './listenerMiddleware';
import rootReducer from './rootReducer';

export const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().prepend(listenerMiddleware.middleware),
});

优点： #

• 通知逻辑完全和业务逻辑解耦，集中管理所有需要触发通知的场景
• 自动保证在reducer处理完动作后执行，无需手动控制顺序
• 支持异步逻辑（比如如果通知需要调用API统计数据）

2. 使用Redux Thunk链式dispatch动作 #

如果你还在使用传统的Redux（没有用RTK），或者更习惯用thunk，可以在action creator里先dispatch业务动作，再dispatch通知动作。为了避免重复代码，可以封装一个通用的withNotification高阶函数来包装action creator。

实现示例： #

首先封装一个通用的通知包装函数：

const withNotification = (actionCreator, notificationConfig) => {
  return (...args) => (dispatch) => {
    // 先dispatch业务动作，等待状态更新
    const result = dispatch(actionCreator(...args));
    
    // 然后dispatch通知动作
    dispatch(addNotification({
      ...notificationConfig,
      // 可以根据业务动作的返回值或参数动态生成消息
      message: typeof notificationConfig.message === 'function' 
        ? notificationConfig.message(args) 
        : notificationConfig.message
    }));
    
    return result;
  };
};

然后用它包装你的业务action creator：

// 原来的登录成功action creator
const loginSuccess = (user) => ({
  type: 'LOGIN_SUCCESS',
  payload: user
});

// 包装后，dispatch这个动作时会自动添加通知
export const loginSuccessWithNotification = withNotification(
  loginSuccess,
  { type: 'success', message: '登录成功！' }
);

// 动态消息的例子
const addItemSuccess = (item) => ({
  type: 'ADD_ITEM_SUCCESS',
  payload: item
});

export const addItemSuccessWithNotification = withNotification(
  addItemSuccess,
  { 
    type: 'success', 
    message: (args) => `项目${args[0].name}添加成功！` 
  }
);

优点： #

• 不需要额外的中间件（如果已经在用thunk）
• 通知逻辑和业务动作绑定，调用时只需dispatch包装后的动作即可

缺点： #

• 每个需要通知的业务动作都要包装一次，相对listener方案还是有少量重复
• 如果是异步action（比如登录请求），需要确保在成功回调里再dispatch通知

3. 不推荐：在reducer里添加通知 #

你提到的在每个业务reducer里更新通知数组的方式，虽然技术上可行，但缺点很明显：

• 代码冗余：每个需要通知的reducer都要写类似的case 'LOGIN_SUCCESS':逻辑来添加通知
• 耦合严重：通知逻辑和业务逻辑混在一起，后续修改通知样式或规则时，要修改多个reducer
• 难以扩展：如果需要添加异步通知逻辑（比如延迟关闭通知），reducer里根本做不到（因为reducer必须是纯函数）

所以这种方式只适合非常简单的场景，不推荐作为长期方案。

总结 #

如果已经在使用Redux Toolkit，createListenerMiddleware是最佳选择——它既解耦了业务和通知逻辑，又能保证通知在状态更新后触发，还支持复杂的异步场景。如果还在使用传统Redux，那么用Thunk链式dispatch+高阶函数封装的方案是比较好的替代。

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