我正在规划应用程序的结构。这是我的第一个React应用程序。应用程序有几个状态切片和一些全局状态,这些状态会影响其他切片。我正在寻找最好的方法来建立切片之间的关系。我首先想到的是中间件。
例如:
export const store = configureStore({
reducer: {
posts: postsReducer, // { posts: [] }
user: userReducer // { blocked: true }
},
middleware: [userValidation]
})
如果用户被阻止,我想禁用添加帖子。我应该使用中间件吗?
export default const userValidation = store => next => action => {
const { user } = store.getState()
if (action.type === 'posts/add' && user.blocked) {
store.dispatch(someWarning())
} else {
next()
}
}
我担心会有太多的中间件,逻辑和条件太多。我也担心性能。这是好的方法吗?
3条答案
按热度按时间9avjhtql1#
我的观点是什么?
我认为后端应该负责授权,后端永远不应该信任前端和双重检查(为什么如果一个被阻止的用户找到了发送请求的方法?)
您应该注意哪些事项?
我认为你只应该隐藏触发调度操作的按钮/表单。如果被阻止的用户找到了发送请求的方法,将从后端返回**401(未授权)**代码响应。
真实的单词示例?
看看StackOverflow是如何处理投票行为的,它允许你点击你自己帖子的箭头,发送请求,后端验证它并发送响应
You can't vote for your own post
。如果有其他组件的其他操作取决于用户状态,该怎么办?
好吧,假设您有
PostComponent
和CommentComponent
,并且您希望在用户被阻止时隐藏发布和评论的操作。我建议组件不要了解用户的一些信息,相反,它们应该有一些属性,如
canAddNewPost
和canAddNewComment
,这些属性将在渲染时定义,如下所示:然后,在组件中,您可以使用该属性来决定向用户显示或隐藏哪些块。或者使用该属性来验证分派,例如:
或者
我希望它会有帮助。
o7jaxewo2#
不需要创建多个切片,特别是当您希望将一个切片中的数据用于另一个切片时,因此您可以只创建一个包含用户信息和帖子信息的切片,然后就可以轻松地实现所需的内容。
另一个解决方案是使用Redux-Thunk,因为您可以查看整个状态并决定是否继续执行该操作。您编写的自定义中间件基本上是重新发明Redux-Thunk。
jgzswidk3#
根据@GuillaumeBrunerie的回答,我可以使用thunk动作创作者:
我看这办法不错,不是吗?