如何在Redux Toolkit的slice中获取dispatch，无需从组件手动传入？

方案1：将listen改造为标准Thunk函数 #

Redux Toolkit默认集成了Thunk中间件，支持返回函数的Action，Thunk中间件会自动注入dispatch和getState参数，无需手动传递。
改造后的listen代码如下：

export const listen = () => (dispatch) => {
    const unsub = onSnapshot(collection(db, "users"), (snapshot)=>{
        snapshot.docChanges().forEach(change => {
            // 补全原代码遗漏的doc获取逻辑
            const doc = change.doc;
            if(change.type === "added") {
                dispatch(ADD( { ...doc.data(), id: doc.id }));
            } else if (change.type === "removed") {
                dispatch(DELETE(doc.id));
            }
        });
    });
    return unsub;
}

组件内调用方式：

import { useDispatch } from 'react-redux';
import { listen } from './userSlice';

function YourComponent() {
  const dispatch = useDispatch();
  useEffect(() => {
    // 直接dispatch该Thunk即可，无需手动传入dispatch
    const unSubscribe = dispatch(listen());
    // 组件卸载时取消Firestore监听
    return () => unSubscribe();
  }, [dispatch])
  // 组件其他逻辑
}

方案2：全局启动监听（无需组件触发） #

如果该监听不需要和组件生命周期绑定，可以在store初始化后直接调用，完全不需要组件参与：

// store.js文件
import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';
import { listen } from './userSlice';

export const store = configureStore({
  reducer: {
    users: userReducer
  }
});

// 全局启动监听
const unSubscribeUsers = store.dispatch(listen());

注意：原有DELETE Reducer存在Bug #

你当前的DELETE reducer写法不会生效，RTK的Immer逻辑要求要么直接修改state引用，要么返回新的state：

// 错误写法：局部变量赋值不会生效
DELETE: (state, {payload}) => { state = state.filter(u => u.id !== payload); }

// 正确写法：返回过滤后的新数组
DELETE: (state, {payload}) => {
  return state.filter(u => u.id !== payload);
}

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