我知道我的问题来自对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
直到数据可用为止。