redux、normalizr、访问存储 mapDispatchToProps
redux, normalizr, access store mapDispatchToProps
如果我有如下数据对象
{
items: [
{id: 1, selected: false},
{id: 2, selected: false}
]
}
运行 这通过 normalizr 会让我得到类似
{
entities: {
1: {selected: false},
2: {selected: false}
},
result: {
items: [1, 2]
}
}
通常我会有一个 Items 组件将状态映射到道具,如下所示:
const mapStateToProps = (state) => {
return state.result;
};
我的问题出在 Items 组件上,我会有一个需要将商店状态发送到服务器的保存按钮。
我似乎无法找到访问存储以在将数据发送到服务器之前对数据进行非规范化的好方法。
1) 我不想在 MapStateToProps 中包含实体,因为项目组件不需要知道它。
2) 由于性能问题,MergeProps 似乎也不理想。
现在我通过简单地导入商店并在我的调度方法中访问它来直接访问商店,这似乎有效,但这打破了关注点分离,有没有更好的方法来做到这一点?
从您的问题描述来看,我相信您是通过 Save 按钮组件或其他 React 组件中的方法发送商店数据的。如果这样做,无论如何都必须向该组件公开发送数据。
另一种解决方案是通过中间件处理 API 调用。 redux-saga 或 redux-thunk 等库可以巧妙地处理您的情况。它们旨在处理异步流,并提供对商店的访问。
如果我有如下数据对象
{
items: [
{id: 1, selected: false},
{id: 2, selected: false}
]
}
运行 这通过 normalizr 会让我得到类似
{
entities: {
1: {selected: false},
2: {selected: false}
},
result: {
items: [1, 2]
}
}
通常我会有一个 Items 组件将状态映射到道具,如下所示:
const mapStateToProps = (state) => {
return state.result;
};
我的问题出在 Items 组件上,我会有一个需要将商店状态发送到服务器的保存按钮。
我似乎无法找到访问存储以在将数据发送到服务器之前对数据进行非规范化的好方法。
1) 我不想在 MapStateToProps 中包含实体,因为项目组件不需要知道它。
2) 由于性能问题,MergeProps 似乎也不理想。
现在我通过简单地导入商店并在我的调度方法中访问它来直接访问商店,这似乎有效,但这打破了关注点分离,有没有更好的方法来做到这一点?
从您的问题描述来看,我相信您是通过 Save 按钮组件或其他 React 组件中的方法发送商店数据的。如果这样做,无论如何都必须向该组件公开发送数据。
另一种解决方案是通过中间件处理 API 调用。 redux-saga 或 redux-thunk 等库可以巧妙地处理您的情况。它们旨在处理异步流,并提供对商店的访问。