useEffect中的Redux调度会导致大量Redux错误

Question

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

我使用的是nextJS，当访问诸如/username/p/postID之类的共享URL时，我想显示最初的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时，您不能取消订阅存储侦听器"在执行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,
});
};

当这里显示模式后视图时，它包含多个导致错误的useSelector，但只有当我在useEffect中显示模式后查看时，当通过单击操作调度时，它在整个应用程序中运行良好。

在模态后视图中，各种选择器抛出错误：

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

Answer 1

您似乎没有按照预期的方式使用redux。传递给dispatch()的应该是操作。reducer接收该操作并返回新状态，然后将新状态发送给您的订阅者(React组件(。

相反，您调用的是函数showModalPostView，它调用父组件中的某个setState函数，并返回谁知道是什么。该返回值作为参数dispatch传递，从而启动一个reducer。但是，setState可能会导致您的子组件取消订阅存储，以便重新呈现。

就好像你实际上并没有在调度一个动作；您只是在调用一个函数，所以根本不应该使用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);
}
}