我们正在使用React / Redux构建一个新的应用程序,该应用程序将呈现在服务器端。
我们希望遵循Redux的最佳实践,并在服务器传递到商店初始状态之前对服务器上的数据进行规范化处理。
对于这个例子,假设我们有一个通用的'Products'实体,它可能非常复杂,并且根据商店根目录和商店根目录上的另一个对象进行标准化。所以结构和减速器遵循典型的“切片减速器”模式,看起来像这样:
{
page_x_state: PageReducer
products: ProductsReducer
}
我们正在使用组合减速器在将减速器传递到商店之前合并减速器。
理论用例:我们有一个'产品'页面,显示基本产品信息列表。用户可以点击产品以显示模型,然后加载并显示完整的产品数据。
对于上面的例子,从服务器发送的状态将只包含基本的产品模型(3或4个字段),这足以呈现表格并获取所有产品信息,在这一点上是浪费并且性能不高。
当用户点击某个产品时,我们将通过AJAX调用获取该产品的所有数据。一旦我们拥有单一产品的所有数据,我们是否应该使用完整模型更新产品商店中的实例?如果是这样,那么我们最终会得到一组对象,所有这些对象都可能是不同的状态(有些可能具有最小的字段,而有些则是具有10个字段的成熟对象)。这是处理它的最好方法吗?
另外,我希望能够听到有关管理服务器上相同底层模型的不同表示的任何想法,以及如何将其映射到Redux存储(理想情况下是Java)。
发布于 2018-03-20 17:09:21
我们应该用完整的模型更新产品商店中的实例吗?
应该指出,Java和ReactJs + Redux没有太多概念上的重叠。一切都是一个Javascript对象,而不是一个具有类的对象。
一般来说,将您在Redux商店状态下收到的所有数据存储起来是一种方法。要解决这样一个事实,即一些数据将会最小化,并且一些数据将被完全加载,您应该onComponentWillMount
在单个产品展示容器的方法中进行有条件的ajax调用。
class MyGreatProduct extends React.Component {
onComponentWillMount() {
if(!this.props.thisProduct.prototype.hasProperty( 'somethingOnlyPresentInFullData' )) {
doAjaxCall(this.props.thisProduct.id).then((result) => {
this.props.storeNewResult(result.data);
}).catch(error=>{ ... })
}
}
// the rest of the component container code
}
const mapStateToProps = (state, ownProps) => {
return {
thisProduct: state.products.productInfo[ownProps.selectedId] || {id: ownProps.selectedId}
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
storeNewResult: (data) => { dispatch(productDataActions.fullProductData(data)) }
}
export default connect(mapStateToProps, mapDispatchToProps)(MyGreatProduct);
使用此代码,应该清楚在组件和容器可以关于在任何给定时间在商店中可用的确切数据的不确定性。
就管理服务器上相同底层模型的不同表示以及如何将其映射到Redux存储区而言,我会尝试使用与JSON相同的相对松散度。这应该消除一些耦合。
我的意思是将你拥有的数据添加到JSObject中供React + Redux使用,而不用担心在执行应用程序期间可能存储在Redux状态中的值有多大。
https://stackoverflow.com/questions/-100004277
复制相似问题