Responsive component life cycle, condition and contraction

Question

I would like to use redux to keep the state of my entire react , however, I am stuck in a specific case:

• what to do with redux when a component needs a local state modified with lifecycle methods like componentDidUpdate or componentDidMount ?

An example of a responsive component for placing "cards" organized by an isotope layout:

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

Is there a way to remove the local state in this component and use abbreviation instead? I do not see how to do it

Answer 1

Put your items_list in a reduction state. Your gearbox might look like this:

 const initialState = { items: [] }; export function myReducer(state = initialState, action) { switch (action.type) { case 'SET_ITEMS': return Object.assign({}, state, { items: action.items }); } return state; } 

Or for something more complicated:

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

Once you have set up your store and provider (see Redux docs), set up your smart component as follows:

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

Now your items and actions are requisites for your Root component. If your items live in a component of a lower order, just pass them through the tree as a props.

Hope this gives you a general idea. With Redux, you will find that your React components will use state a lot less and props a lot more.

One more thing ...

This may be a minor matter, but I highly recommend that you do not store your isotopic object in a component state. (Regardless of whether you use Redux.) The isotopic object is actually not part of the state, this is your view. In React, a component is updated in response to a state change. But your componentDidUpdate does the opposite: it changes state in response to a component update.

Alternatively, just save it to the object itself. i.e.

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

(Although I would usually recommend against using such instance variables in React, DOM manipulation libraries such as Isotope are a worthy exception.)