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

Question

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

恐怕中间件会太多，逻辑和条件太多。我也担心性能。有什么好办法吗？

Answer 1

我的观点是什么？

我认为后端应该负责授权，后端不应该信任前端并进行双重检查(为什么如果被阻止的用户找到了发送请求的方法？)。

你应该注意什么？

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

真实的例子？

看看 StackOverflow 如何处理投票操作，它允许您点击自己帖子的向上箭头，发送请求，后端验证它并发送响应您不能为自己的帖子投票.

如果还有其他组件执行取决于用户状态的其他操作怎么办？

好吧，假设您有 PostComponent 和 CommentComponent，并且您希望在用户被阻止时隐藏发帖和评论操作。

我建议组件不要了解有关用户的信息，而是应该有一些像 canAddNewPost 和 canAddNewComment 这样的属性，这些属性将在渲染时定义，如下所示:

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

然后在组件中，您可以使用该属性来决定向用户显示或隐藏哪些 block 。或者用它来验证调度，例如:

{canAddNewPost ? <AddNewPostForm /> : null}

或者

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

希望对您有所帮助。