redux,normalizr,访问商店mapDispatchToProps

时间:2018-09-06 01:09:57

标签: reactjs redux react-redux normalizr

如果我有如下数据对象

 {
   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中包含实体,因为不需要item组件知道它。

2)由于性能问题,MergeProps似乎也不理想。

现在,我可以通过简单地导入商店并以我的调度方法访问它来直接访问商店,这似乎可行,但这打破了关注的分离,有没有更好的方法呢?

1 个答案:

答案 0 :(得分:1)

从对问题的描述来看,我相信您是通过“保存”按钮组件或另一个React组件中的方法发送商店的数据的。如果这样做,无论如何都必须向该组件公开发送数据。

另一种解决方案是由中间件处理API调用。 redux-saga或redux-thunk之类的库可以轻松处理您的案件。它们旨在处理异步流,并提供对存储的访问。