防止组件更新来自多个道具的反应
我有一个react/redux应用程序,它有一个recharts图表,它在数据更改时进行动画处理。防止组件更新来自多个道具的反应
我使用的是Redux
,我的大部分操作只改变了一个state
属性,导致一个单一的props
通过。但是,我的一些操作现在使用thunks
进行一些异步操作并调用其他操作。
例如,我可能会有一个动作getChartData
,当用户选择一个轴时,该动作将被调用。
export let getChartData = axis => dispatch => {
// trimmed for brevity
fetchJSON(url).then(data => {
dispatch(dataRetrievalSuccess(data));
dispatch(updateSelectedAxis(axis));
}).catch(error => {
dispatch(dataRetrievalError(error));
});
};
在这个例子中updateSelectedAxis
值将改变负责显示当前选择的轴线和dataRetrievalSuccess
功能将是负责传递props.data
到图表的局部状态属性。
我试图解决的问题是,当组件的selectedAxis道具更改但数据尚未更新时,阻止更新图表。
我想我将能够使用像componentWillRecieveProps
但我在这里与我上面的thunk
例子的问题是,我得到一个呼叫componentWillRecieveProps
当我打电话dataRetrievalSuccess
其中有两个this.props.data
和nextProps.data
所以同样的数据I可以防止更新。但是,当我随后致电updateSelectedAxis
时,我没有将data
作为道具的一部分,因为它已经更改,所以我无法根据这两个值执行逻辑操作。
我认为这可能是一个订购问题,但即使我将它包装成单个动作,我仍然会获得多个道具设置。
我可以通过将数据和轴的变化打包到单个对象来解决此问题吗? 我不太确定在建筑方面采用这种方法的最佳方法,并欢迎提供任何建议。
编辑: 只是扩大一点,我调度两个动作,这两个动作都会改变他们自己的状态,导致两个呈现。
我试着写是这样的:
shouldComponentUpdate(nextProps, nextState) {
if(this.dataHasChanged(nextProps)) {
return true;
}
return false;
}
几乎工作,但每个数据的图表显示的时间是一个渲染的背后它必须这样做。
您可以使用thunk(作为thunk为您注入状态)访问动作创建者的当前存储状态,然后将ajax响应数据与以前的状态数据进行比较以分派新动作。
export let getChartData = axis => (getState, dispatch) => {
// trimmed for brevity
fetchJSON(url).then(data => {
if(getState().data !== data){
dispatch(dataRetrievalSuccess(data));
dispatch(updateSelectedAxis(axis));
}
}).catch(error => {
dispatch(dataRetrievalError(error));
});
};
怎么样shouldComponentUpdate(nextProps,nextState)? –
您提到的这个单一的州属性包含DATA和AXIS?在其他世界上,在全球状态下,您可以访问这些变量? (和它可以通过this.props你传递给组件?如果你有权访问这两个对象,你可以使用componentShouldUpdate函数:> – MariuszJasinski
@DennisStücken问题是我得到两个调用这个函数,一个与数据和一个与轴的变化,我需要两个工作是否应该更新图表动画。 – dougajmcdonald