Metti la tua items_list nel tuo stato redux. Il tuo riduttore potrebbe essere simile a questo:
const initialState = {
items: []
};
export function myReducer(state = initialState, action) {
switch (action.type) {
case 'SET_ITEMS':
return Object.assign({}, state, {
items: action.items
});
}
return state;
}
O per qualcosa di un po 'più complessa:
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;
}
Una volta che hai configurato il tuo negozio e provider (vedi la documentazione Redux), impostare il vostro "intelligente componente" in questo modo:
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);
Ora i tuoi articoli e le azioni sono oggetti di scena per il componente principale. Se i tuoi oggetti vivono in un componente di ordine inferiore, devi semplicemente passarli nell'albero come oggetti di scena.
Spero che questo ti dia l'idea generale. Con Redux scoprirai che i componenti di React useranno molto meno e offriranno molto di più.
Ancora una cosa ...
Questa potrebbe essere una questione minore, ma vi esorto a non memorizzare il vostro oggetto isotopo sullo stato del componente. (Indipendentemente dal fatto che tu usi o meno Redux.) L'oggetto isotopo non è veramente un pezzo di stato, è la tua opinione. In React, un componente si aggiorna in risposta a un cambiamento di stato. Ma il tuo componentDidUpdate
fa il contrario: cambia lo stato in risposta ad un aggiornamento del componente.
In alternativa, è sufficiente memorizzarlo sull'oggetto stesso. vale a dire
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();
}
}
(Mentre di solito mi sento di raccomandare contro contro l'uso di queste specie di variabili di istanza in Reagire, DOM librerie di manipolazione come Isotope sono un'eccezione degna.)
Come è il tuo items_list sempre popolata? –
Ho una funzione che esegue un setState con items_list – mguijarr