Question

我正在尝试建立一个电子商务商店，它要求我最初在主页上加载趋势产品列表。

在这里，我可以简单地使用redux并简单地显示此类数据（大致）

const trendingProducts = await get('/api/trendingProducts')
render(){
  <TrendingProducts data={this.trendingProducts.data} />
}

我在我的应用程序中使用redux。那么我应该在其他地方发送以获取趋势产品吗？

总而言之，我是否应该只使用Redux调度处理每一次获取/渲染？

Answer 1

这是非常主观的，没有正确的答案，但我可以根据我的经验告诉你。

始终将您的业务逻辑与您的组件分开

如果您正在进行API调用，那么您肯定会发送一个操作，而不是在您的组件中写这个，因为有很多类似redux的存储正在出现，并且可能会在以后您想要使用一些不同的架构更改您的商店。您的视图图层应独立于您的API调用（业务逻辑）。通过这种方式，在重新构建应用程序时，您只需更改逻辑，您的视图将保持不变。

我正在根据我的经验编写此文章，我们开始将整个应用从backbone重构为React。我们有models和collections，我们更改了整个html，但我们最初没有更改任何业务逻辑，只是views已被弃用，但后来我们删除了业务逻辑也使用redux（迭代）。您应该以这样的方式编写代码，使其具有reusability之后的最大React，这就是您应该如何编写前端代码。

此外，组件的状态可以驻留在整个应用程序不受影响的组件中。例如显示或隐藏第三窗格或叠加层等。

Answer 2

Redux是应用程序状态的商店管理。 Redux的dispatch用于调度旨在以某种方式更新应用程序状态的操作。

因此，如果您的应用程序逻辑需要显示属于您的应用程序状态的信息 - 您需要从Redux存储中获取它。如果此类信息尚未提供给Redux商店 - 您需要从某个来源（例如fetch）获取此信息并使用dispatch更新您的应用程序状态。如果您尝试显示的信息不是应用程序状态的一部分 - 您可以直接显示它，但在这种情况下，您需要自己处理React生命周期事件，因为React在组件状态更改时重新绘制组件。

更新：如果您将trendingProducts置于组件的状态，您的示例代码将正常工作：

class MyComponent {
    constructor() {
        super();
        this.state = {
            trendingProducts: {}
        }
    }

    componentWillMount() {
        fetch('/api/trendingProducts').then(data => this.setState({trendingProducts: data}));
    }

    render() {
        return (
            <TrendingProducts data={this.state.trendingProducts}/>
        )
    }
}

我应该在初始渲染期间使用redux调度吗？

2 个答案: