在减速器之间共享 state 的最佳方式（redux 工具包）

Question

我正处于规划应用结构的阶段。 这是我的第一个反应应用程序。 应用程序有几个 state 切片和一些影响其他切片的全局状态。 我正在寻找建立切片之间关系的最佳方法。 我的第一个想法是中间件。

例如：

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

根据@GuillaumeBrunerie 的回答，我可以使用 thunk 动作创建器：

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

我认为这是一个好方法，不是吗？

Answer 2

我的观点是什么？

我认为后端应该负责授权，后端不应该信任前端并仔细检查（为什么如果被阻止的用户找到发送请求的方式？）。

你应该注意什么？

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

真实的例子？

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

如果有其他组件具有依赖于用户状态的其他操作怎么办？

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

我建议组件不要对用户有所了解，而是应该有一些像canAddNewPost和canAddNewComment这样的道具，它们将在渲染时定义，如下所示：

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

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

{canAddNewPost ? <AddNewPostForm /> : null}

或者

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

我希望它会有所帮助。

Answer 3

没有什么需要您制作多个切片，尤其是当您想将一个切片中的数据用于另一个切片时。 所以你可以只有一个包含用户和帖子信息的切片，然后实现你想要的就很简单了。

另一种解决方案是使用 Redux-Thunk，因为您可以查看整个 state 并决定是否继续操作。 您编写的自定义中间件基本上是对 Redux-Thunk 的重新发明。