React 组件生命周期、状态和 redux

Question

我想使用 redux to store the state of my whole react 应用程序，但是我遇到了一个特殊情况：

当组件需要本地状态时如何处理 redux，通过 componentDidUpdate 或 componentDidMount 等生命周期方法修改？

包含由 isotope 布局库安排的 "cards" 的反应组件示例：

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？我看不到该怎么做

Answer 1

将你的 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 文档），像这样设置你的 "smart component"：

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);

现在你的项目和动作是你的根组件的道具。如果您的项目位于低阶组件中，只需将它们作为道具传递到树下即可。

我希望这能给你一个大概的想法。使用 Redux，你会发现你的 React 组件将更少地使用 state 而更多地使用 props。

还有一件事...

这可能是一件小事，但我强烈建议您不要将同位素对象存储在组件状态中。（不管你是否使用 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 中使用这些类型的实例变量，DOM 像 Isotope 这样的操作库是一个有价值的例外。）

React 组件生命周期、状态和 redux

React components lifecycle, state and redux

jquery-isotope

reactjs

redux