我知道我的问题来自对react-redux的误解,但我将描述我的用例,希望有人会指出正确的方向。

我正在尝试在redux存储内部存储表(蚂蚁设计表)中的选定行键(selectedRowKeys)。当商店结构很简单时,一切都将正常工作:

selectedRowKeys: []


但是我想以规范化的形式存储该状态以处理多个表和多个表的特性:

tables: {
 123fdfas-234dasf-234asdf-23rfa : { //table id
    id: 123fdfas-234dasf-234asdf-23rfa,
    selectedRowKesy: []
    //... other properities
    }
}


问题是当redux尝试像这样映射mapStateToProps时,此状态不存在:

const mapStateToProps = (state, ownProps) => {
  if (!ownProps.id) {
    ownProps.id = uuidv4();
  }

  return {
    selectedRowKeys: state.tables[ownProps.id].selectRowKeys
  };
};


state.tables[ownProps.id]未定义,所以有错误。

我以为我需要以某种方式初始化状态,但这使我更加困惑。到目前为止,我已经弄清楚了:


我无法像reducerName (state = initialState, action)这样的化简器初始化状态,因为未分派动作并且没有action.id(动作对象具有带有表ID的有效负载)。
我无法在INIT_TABLE中调度动作componentDidMount(),因为mapStateToProps首先执行,所以state.tables[ownProps.id]仍未定义。


我觉得这个用例很奇怪,尽管我已经搜寻并思考了三天,但我还是找不到解决方案。

请指导我,我陷入了疯狂:)

这是我的第一个SO问题,请让我知道是否不清楚。

最佳答案

谁负责创建新表?这是解决此问题的决定因素。

ID绝对不应该在mapStateToProps中创建,并且您不应该对ownProps进行突变。我什至感到惊讶,甚至还行。如果使用redux,则应在操作中创建id。

如果您的React-app具有某种机制来创建新表(例如,用户单击按钮),那么您应该在其中调度初始化动作。如果您确实找不到负责表初始化的父组件,则可能是该组件的责任,您应该在componentDidMount中分派操作。

无论选择哪种选项,您的mapStateToProps都应优雅地处理空状态,即。如果缺少selectedRowKeys,应将其设置为某些默认值(可能是空数组还是null?)。如果没有可用的默认值,则组件应处理缺失值。通常在render-function中进行一些null检查,这些检查将返回null直到数据可用为止。

10-07 19:59
查看更多