我想使用redux来存储我的整个react应用程序的状态,但是我遇到了一个特定的情况:
componentDidUpdate
或componentDidMount
等生命周期方法修改?包含由isotope布局库排列的“卡片”的反应组件示例:
componentDidMount() {
let container = ReactDOM.findDOMNode(this);
if (! this.state.isotope) {
this.setState({ isotope: new Isotope(container, {itemSelector: '.grid-item', layoutMode: 'masonry'})});
}
}
componentDidUpdate(new_props, new_state) {
if (new_state.items_list != this.state.items_list) {
if (this.state.isotope) {
this.state.isotope.reloadItems();
this.state.isotope.layout();
this.state.isotope.arrange();
}
}
}
有没有办法删除此组件中的本地状态并使用redux?我看不出怎么做
答案 0 :(得分:16)
将您的items_list置于redux状态。您的减速器可能如下所示:
const initialState = {
items: []
};
export function myReducer(state = initialState, action) {
switch (action.type) {
case 'SET_ITEMS':
return Object.assign({}, state, {
items: action.items
});
}
return state;
}
或者更复杂的事情:
const initialState = {
items: []
};
export function myReducer(state = initialState, action) {
switch (action.type) {
case 'ADD_ITEM':
return Object.assign({}, state, {
items: [ ...state.items, action.item ]
});
case 'REMOVE_ITEM':
return Object.assign({}, state, {
items: [
...state.items.slice(0, action.index),
...state.items.slice(action.index + 1)
]
});
}
return state;
}
一旦您配置了商店和提供商(请参阅Redux文档),请设置您的智能组件"像这样:
function mapStateToProps(state) {
return {
items: state.items
}
}
function mapDispatchToProps(dispatch) {
const actions = bindActionCreators(actionCreators, dispatch);
return {
addItem: actions.addItem,
removeItem: actions.removeItem
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Root);
现在,您的项目和操作是Root组件的道具。如果您的商品位于较低级别的组件中,只需将它们作为道具传递到树下。
我希望能给你一般的想法。使用Redux,你会发现你的React组件将使用更少的状态并且支持更多。
还有一件事......
这可能是一个小问题,但我建议您不要将同位素对象存储在组件状态中。 (无论你是否使用Redux。)同位素对象不是一个状态,它是你的观点。在React中,组件会更新以响应状态的变化。但是你的componentDidUpdate
反过来了:它会改变状态以响应组件更新。
作为替代方案,只需将其存储在对象本身上即可。即。
componentDidMount() {
const container = ReactDOM.findDOMNode(this);
this.isotope = new Isotope(container, {
itemSelector: '.grid-item',
layoutMode: 'masonry'
});
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.items !== this.props.items) {
this.isotope.reloadItems();
this.isotope.layout();
this.isotope.arrange();
}
}
(虽然通常我建议不要在React中使用这些实例变量,但像Isotope这样的DOM操作库是个例外。)