目前,我的一个redux container
需要许多额外的跟展现没有关系的数据。因此目前困惑额外数据的获取。
举个例子。
render() {
const sendMessage = send(this.props.data, this.props.title);
return (
<div>
<button onClick={}>{this.props.title}</button>
</div>
);
}
const mapStateToProps = (state) => {
return {
data: state.data,
title: state.title
}
}
也就是我展现不需要有data
,但是点击发送信息需要该属性。
也就是data
变化,我的容器也跟着re-render
了。这十分不合理。
目前想到两个方法。
一是使用redux-thunk
// action.js
const sendMessageAction = (title) => (dispatch, getState) => {
const data = getState().data;
send(data, title);
}
// container.js
const mapDispatchToProps = (dispatch) => ({
sendMessage: dispatch(sendMessageAction())
});
但是这样,为了获得state
,专门写在action.js
,让action
变得复杂,且自认为破坏action
原有作用,此处根本不用dispatch
。
二是使用mergeProps
const mapStateToProps = (state) => {
return {
data: state.data,
title: state.title
}
};
const mergeProps = (stateProps, dispatchProps) => {
return Object.assign({}, dispatchProps, {
title: stateProps.title,
sendMessage: send.bind(null, title, data)
});
}
这个方法也有问题,和最先的一样,data
变化,容器也跟着re-render
了
不知道有什么其他方法?
或许你的data本就不应该放在redux中,而应该考虑其他的地方存储,比如localStorage ...