Question

我正在研究反应原生应用程序。我有一个父组件和两个子组件。在孩子一个我有一个很长的列表，我可以点击选择多个项目，为此我点击一个接一个地添加所有选定的项目。

现在提交按钮位于另一个子组件中。在那个提交按钮上我需要那个数组。

这就像在什么应用程序中我们可以选择多个聊天对话进行删除，然后按标题组件中的删除删除所有选定的对话。我必须实现相同的事情

我正在考虑使用redux，但不确定我将调用store.dispatch（）的操作。我可以从不同的组件中调用它来存储来自其他组件的变量..如给定的

点击列表项我正在创建数组，但如果同时我将调用dispatch，那么这不是一个好主意，因为在选择每个项目时它将调用dispatch。

是否可以在单击提交按钮上从头组件调用store.dispatch，它将从列表组件中获取该数组。

我想在商店中发送selectedItems数组，以便我可以在提交

上使用它列表页面代码

就像

constructor(props) {
   super(props)
   this.state = {
   selectedItems : []  
}

选择我称之为_selectedItem

的每个项目

<TouchableHighlight underlayColor='#556b2f' onPress={() => {this._selectedItem(person)}}>

_selectedItem函数定义为数组中的推送项

 _selectedItem(person) {
  console.log('Selected item '+person.first_name);
  this.state.item=person;
  this.state.selectedItems.push(this.state.item);
  console.log('Selected item '+this.state.selectedItems.length);
}

我是redux的新手，所以不知道它可能是一个基本的东西。提前谢谢..

Answer 1

是的，您可以在选择所有列表项后立即发送到redux商店。从我有限的经验来看，它听起来像一个比你到目前为止更好的架构如下：

父组件存储状态，以及更新状态的函数，两个子节点是无状态的（将父节点的状态变量作为props）。换句话说，父组件将包括以下内容：

state = {
  selectedItems: []
}

onPress() {
  // Dispatch action with this.state.selectedItems
}

_selectItem(person) {
  let newSelectedItems = [...this.state.selectedItems, person];
  this.setState({ selectedItems: newSelectedItems });
}

render() {
  return (
    <View>
       <ListComponent 
         selectedItems={this.state.selectedItems} 
         _selectItem={this._selectItem.bind(this)} />
       <ButtonComponent
         onPress={this.onPress.bind(this)} />
    </View>
  );
}

我希望这有助于您朝着正确的方向前进。

React native：Redux调用调度函数，用于从不同组件获取数据并使用

1 个答案: