在Reducer之间共享状态的最佳方式(redux工具包)

ehxuflar  于 2022-11-12  发布在  其他
关注(0)|答案(3)|浏览(160)

我正在规划应用程序的结构。这是我的第一个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()
    }
}

我担心会有太多的中间件,逻辑和条件太多。我也担心性能。这是好的方法吗?

9avjhtql

9avjhtql1#

我的观点是什么?
我认为后端应该负责授权,后端永远不应该信任前端和双重检查(为什么如果一个被阻止的用户找到了发送请求的方法?)

您应该注意哪些事项?

我认为你只应该隐藏触发调度操作的按钮/表单。如果被阻止的用户找到了发送请求的方法,将从后端返回**401(未授权)**代码响应。

真实的单词示例?

看看StackOverflow是如何处理投票行为的,它允许你点击你自己帖子的箭头,发送请求,后端验证它并发送响应You can't vote for your own post

如果有其他组件的其他操作取决于用户状态,该怎么办?

好吧,假设您有PostComponentCommentComponent,并且您希望在用户被阻止时隐藏发布和评论的操作。
我建议组件不要了解用户的一些信息,相反,它们应该有一些属性,如canAddNewPostcanAddNewComment,这些属性将在渲染时定义,如下所示:

<PostComponent canAddNewPost={!user.isBlocked} />
// ...
<CommentComponent canAddNewComment={!user.isBlocked} />

然后,在组件中,您可以使用该属性来决定向用户显示或隐藏哪些块。或者使用该属性来验证分派,例如:

{canAddNewPost ? <AddNewPostForm /> : null}

或者

if (!canAddNewPost) {
    store.dispatch(someWarning())
}

我希望它会有帮助。

o7jaxewo

o7jaxewo2#

不需要创建多个切片,特别是当您希望将一个切片中的数据用于另一个切片时,因此您可以只创建一个包含用户信息和帖子信息的切片,然后就可以轻松地实现所需的内容。
另一个解决方案是使用Redux-Thunk,因为您可以查看整个状态并决定是否继续执行该操作。您编写的自定义中间件基本上是重新发明Redux-Thunk。

jgzswidk

jgzswidk3#

根据@GuillaumeBrunerie的回答,我可以使用thunk动作创作者:

export const addPostWithValidation = payload => (dispatch, getState) => {
    getState().user.isBlocked
        ? dispatch(someWarning())
        : dispatch(addPost(payload))
}

我看这办法不错,不是吗?

相关问题