React
Reageer met Redux
Zoeken…
Invoering
Redux is tegenwoordig de status-quo voor het beheren van de status op applicatieniveau aan de front-end, en degenen die werken aan "grootschalige applicaties" zweren er vaak bij. In dit onderwerp wordt uitgelegd waarom en hoe u de statusbeheerbibliotheek Redux in uw React-toepassingen moet gebruiken.
Opmerkingen
Hoewel de componentgestuurde architectuur van React fantastisch is voor het opdelen van de applicatie in modulaire, ingekapselde kleine stukjes, introduceert het enkele uitdagingen voor het beheer van de status van de applicatie als geheel. De tijd om Redux te gebruiken, is wanneer u dezelfde gegevens op meerdere componenten of pagina's (ook wel route) moet weergeven. Op dat moment kunt u de gegevens niet langer opslaan in variabelen die lokaal zijn voor de ene component of de andere en het verzenden van berichten tussen componenten wordt al snel een puinhoop. Met Redux zijn uw componenten allemaal geabonneerd op dezelfde gedeelde gegevens in de winkel en kan de status dus gemakkelijk consistent worden weergegeven in de hele applicatie.
Connect gebruiken
Maak een Redux-winkel met createStore .
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})
Gebruik connect om component met Redux store te verbinden en rekwisieten van store naar component te trekken.
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
Definieer acties waarmee uw componenten berichten naar de Redux Store kunnen verzenden.
/*
* action types
*/
export const ADD_TODO = 'ADD_TODO'
export function addTodo(text) {
return { type: ADD_TODO, text }
}
Behandel deze berichten en creëer een nieuwe status voor de winkel in reductiefuncties.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}
