useEffect 中的 Redux dispatch 导致大量 redux 错误

Question

编辑 - 已修复问题是绝对垃圾 redux 代码，因为这是我第一次使用它。我研究了 Redux 并重写了我的代码，它运行良好。它不工作，因为有太多的垃圾代码同时工作。

我正在使用 nextJS，当访问共享 URL 例如 /username/p/postID 我想显示初始 post modal/popover.

    async function presentInitialPost(postID: string) {
        const postSnap = await db.collection("posts").doc(postID).get();
        const postData = postSnap.data();
        if(postData){
            dispatch(showModalPostView(postData as Post));
        }
    }

    useEffect(() => {
        if(initialPostID){
            presentInitialPost(initialPostID)
        }
    }, [initialPostID])

错误（每个都有很多）： “当 reducer 正在执行时，你不能取消订阅 store listener。” “你不能在 reducer 执行时调用 store.getState()。”

我在我的应用程序中使用相同的分派就好了 - 如果我在按钮点击时调用 presentInitialPost - 它工作得很好。

我已经尝试过延迟和调试错误的来源，但我根本没有弄清楚，感谢您的帮助，谢谢。

Redux 代码：

showModalPostView(state, action) {
  state.showModalPostViewFunction(action.payload);
},

setShowModalPostViewFunction(state, action) {
  state.showModalPostViewFunction = action.payload;
  return state;
},

showModalPostViewFunction: (post: Post) => {},

showModalPostViewFunction 来自我的覆盖包装器组件

    showModalPostView = (post: Post) => {
        console.log(this.state)
        this.setState({
            showModalPostView: true,
            modalPostViewPost: post,
        });
    };

当此处显示模态 post 视图时，它包含多个导致错误的 useSelectors - 但仅当我在 useEffect 中显示模态 post 视图时 - 它有效当通过点击操作发送时，整个应用程序都很好。

在模式 post 中查看各种选择器抛出错误：

const likedPosts = useSelector((state: ReduxRootState) => state.likedPosts);

Answer 1

看来您没有按照预期的方式使用 redux。您传递给 dispatch() 的内容应该是 action。 reducer 接收该操作和 return 的新状态，然后将新状态发送到您的订阅者（React 组件）。

您正在调用一个函数 showModalPostView，它在父组件中调用一些 setState 函数并且 returning 谁知道呢什么。 return 值作为参数 dispatch 传递，它启动了一个 reducer。但是，setState 可能会导致您的子组件取消订阅商店，因此它可以 re-render.

就好像你实际上并没有在调度一个动作；你只是在调用一个函数，所以你根本不应该使用 dispatch。

async function presentInitialPost(postID: string) {
    const postSnap = await db.collection("posts").doc(postID).get();
    const postData = postSnap.data();
    if(postData){
        showModalPostView(postData as Post);
    }
}

useEffect 中的 Redux dispatch 导致大量 redux 错误

Redux dispatch in useEffect causes numerous redux errors

reactjs

redux

next.js

redux-toolkit