React
Reagiere mit Redux
Suche…
Einführung
Redux ist heutzutage zum Status Quo für die Verwaltung des Status auf Anwendungsebene im Frontend geworden. In diesem Thema wird erläutert, warum und wie Sie die Statusverwaltungsbibliothek Redux in Ihren React-Anwendungen verwenden sollten.
Bemerkungen
Die komponentengesteuerte Architektur von React eignet sich hervorragend für die Aufgliederung der Anwendung in modulare, gekapselte kleine Teile, bringt jedoch einige Herausforderungen mit sich, um den Status der Anwendung als Ganzes zu verwalten. Die Zeit für die Verwendung von Redux ist, wenn Sie dieselben Daten über mehrere Komponenten oder Seiten (auch als Route bezeichnet) anzeigen möchten. Zu diesem Zeitpunkt können Sie die Daten nicht mehr in lokalen Variablen für die eine oder die andere Komponente speichern, und das Senden von Nachrichten zwischen Komponenten wird schnell zum Chaos. Mit Redux abonnieren Ihre Komponenten alle dieselben gemeinsam genutzten Daten im Geschäft, und der Zustand kann somit problemlos in der gesamten Anwendung konsistent dargestellt werden.
Verbinden verwenden
Erstellen Sie einen Redux-Store mit createStore .
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp, { inistialStateVariable: "derp"})
Verwenden Sie connect , um eine Komponente mit dem Redux-Store zu verbinden und Requisiten von Store zu Component zu ziehen.
import { connect } from 'react-redux'
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
Definieren Sie Aktionen, mit denen Ihre Komponenten Nachrichten an den Redux-Store senden können.
/*
* action types
*/
export const ADD_TODO = 'ADD_TODO'
export function addTodo(text) {
return { type: ADD_TODO, text }
}
Behandeln Sie diese Nachrichten und erstellen Sie einen neuen Status für das Speichern in Reduzierfunktionen.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
})
default:
return state
}
}