React中的设计:避免使用redux存储将数据从子组件传播到父组件

Question

在以下情况下，我无法找到组织数据/冗余存储的最佳方法：

我想显示一个显示用户列表的表。表上方是一个TableHelper组件，其中包含一个"筛选器"表单(允许我根据一些搜索文本筛选用户列表)。

在下面的代码中，我有一个表组件，它以数据数组为道具，每个元素显示一行。表助手组件获取数据源(所有用户)，根据搜索文本对其进行过滤，并将过滤后的列表存储在存储中，作为store.tableHelper.data

另一方面，该表会渲染过滤后的数据(如果存在)，如果没有应用过滤器，则只渲染整个数据。

这种方法有很多缺陷，因为表帮助器组件可以用于跨应用程序的多个表，或者可能在同一页上。事实上，最好将过滤后的列表完全排除在商店之外。阻止我这样做的唯一障碍是，过滤列表是在TableHelper组件内部计算的，并且必须以某种方式返回到父容器(其代码在下面)，该父容器将过滤列表提供给表。

如果在这种情况下可以绕过商店的使用，你有什么想法吗？或者更好的是，在以下限制条件下，为这个问题设计解决方案的更好方法是什么：

• 将TableHelper保留为自己的组件，以获得更好的可重用性
• 避免每张桌子的过滤列表污染商店

代码：

@connect((store) => {
return {
users: store.user.users,
filteredData: store.tableHelper.data
}
})
export default class Users extends React.Component {
componentDidMount() {
this.props.dispatch(user.getAllUsers());
}
render() {
const sourceData = _.map(this.props.users, function(user, i) {
return {
'name': user.fullName,
'email' : user.email,
'key': i
}
})
// tableData shows the filtered data if such data is defined
// otherwise, tableData is the source data
let tableData = this.props.filteredData;
if (!this.props.filteredData) {
tableData = sourceData;
}
return (
<div>
<TableHelper data={sourceData}/> 
<Table tableData={tableData} />
</div>
)
}
}

非常感谢

Answer 1

您可以将回调作为道具传递给子级，然后当TableHelper组件准备好过滤后的数据时，它可以将信息传递给该回调。您可能希望将其作为父组件中的组件状态，以便在您传递过滤后的数据时自动更新，例如：

@connect((store) => {
return {
users: store.user.users
}
})
export default class Users extends React.Component {
componentDidMount() {
this.props.dispatch(user.getAllUsers());
}
// Callback that will be passed to the TableHelper component.
handleFiltered = (data) => {
this.setState({
filteredData: data
});
}
render() {
const sourceData = _.map(this.props.users, function(user, i) {
return {
'name': user.fullName,
'email' : user.email,
'key': i
}
})
// tableData shows the filtered data if such data is defined
// otherwise, tableData is the source data
tableData = this.state.filtered ? this.state.filtered : sourceData;
return (
<div>
<TableHelper data={sourceData} updateFiltered={this.handleFiltered} /> 
<Table tableData={tableData} />
</div>
)
}
}

这样，就不用更新TableHelper组件中的Redux存储，而是使用回调将数据传递回其父级。