Question

我是React的新手，我错误地认为Redux对编写任何反应应用程序至关重要。我把所有组件写成无状态，但我并没有真正看到它的好处：

当我拥有适合嵌套对象的嵌套组件时，感觉真的很尴尬。在每个组件级别，我必须传入所有以前的索引，以便子组件可以更新正确的值。另外，我甚至无法使用传递给FlatList的数据，因为它不会被Redux识别;我必须使用商店的数据。

这是应该如何编写无状态组件还是我做了一些可怕的错误？

示例：

州结构

{
  appetizers: [...],
  desserts: [
    ...array of deserts,
    { fruits: [
      ... array of fruits,
      { name: 'apple',
       calories: 100,
      }]
    }
  ]
}

儿童课

class Child extends Component {
  update() {
    const props = this.props;
    props.dispatch(actions.eat(props.food, props.dessertIndex, props.fruitIndex));
  }
  render(){
    const props = this.props;
    return (
      <TouchableHighlight onPress={() => this.update()}>
        <Text>{props.desserts[props.dessertIndex].fruits[props.fruitIndex]}</Text>
      </TouchableHighlight>
    )
  }
}
const mapStateToProps = state => ({ desserts: state.desserts })
export default connect(mapStateToProps)(Child);

父类

class Parent extends Component {
  render(){
    return (
      <FlatList 
        ...props
        data={this.desserts[this.props.dessertIndex].fruits}
        renderItem={({item, index}) => (<Child food={item}, dessertIndex={this.parent}, fruitIndex={index}>)} />
    )
  }
}
const mapStateToProps = state => ({ desserts: state.desserts })
export default connect(mapStateToProps)(Parent);

祖父母班级

class GrandParent extends Components {
  render() {
    return (
      { this.desserts.map((item, index) => {
        return <Child data={item} dessertIndex={index} /> 
      }) }
    )
  }
}
const mapStateToProps = state => ({ desserts: state.desserts })
export default connect(mapStateToProps)(GrandParent)

Answer 1

一些想法：

首先，Redux不是构建React应用程序的必需。但是，有很好的理由将Redux与React一起使用 - 我在why using Redux and React together is a good idea的帖子中谈到了其中一些。

其次，我见过很多人都说你“应该保留Redux的所有状态，只使用功能组件”。 我完全不同意。根据{{3}}，您可以作为开发人员来决定哪个州居住在哪里。另外，根据Dan Abramov的推文，Redux FAQ entry on using Redux state vs React component state。

第三，看起来你当前的Redux状态结构存储了非常嵌套的数据。您可以这样做，但这不是推荐的方法。相反，尽可能it's totally fine to use class components if you need state or lifecycle methods，这简化了您正在处理的查找。有关示例，请参阅you are encouraged to keep your state flattened and normalized上的Redux文档部分。

第四，良好的Redux性能和更简单的道具管理的最佳模式是将许多组件连接到Redux存储，尤其是列表项之类的事情。您可以将项ID和其他值作为props传递给连接的组件，并在其mapState函数中使用这些值来仅提取一个特定组件实例所需的项。我的帖子Structuring Reducers - Normalizing State Shape中有相关的示例，以及Practical Redux, Part 6: Connected Lists, Forms, and Performance的Redux Performance部分中有关该主题的更多文章。

希望这能使你指向更正确的方向。如果您有更多问题，请通过Discord上的Reactiflux聊天频道来询问！邀请链接位于React/Redux links list。

未能在Redux

1 个答案: