React Redux ist eine Bibliothek, die React-Bindungen für Redux bereitstellt.
React-Komponenten, die mit dem Redux-Store vertraut sind, heißen "Container", "Smart Components" oder "Higher Order Component" (HOC). Für die Verwendung von Redux müssen diese Komponenten
store.subscribe
store.dispatch(action)
dies von Hand tun, müssen Sie store.subscribe
und store.dispatch(action)
in React-Containern verwenden.
React Redux vereinfacht die Bindung zwischen dem Redux-Speicher und einer React-Containerkomponente mithilfe der connect
Funktion, die die Eigenschaften des Redux-Status und die Aktionsersteller den Requisiten der Komponente zuordnet.
connect
ist eine Funktion, die eine Komponente höherer Ordnung erstellt. Connect akzeptiert 3 Funktionen ( mapStateToProps
, mapDispatchToProps
, mergeProps
) und gibt eine Containerkomponente zurück, die die Originalkomponente mapDispatchToProps
, mergeProps
sie in eine "verbundene" Komponente umgewandelt wird:
import { connect } from 'react-redux';
const Customers = { ... };
const mapStateToProps = (state) => { ... }
const mapDispatchToProps = (dispatch) => { ... }
export default connect(mapStateToProps, mapDispatchToProps)(Customers);
Ein vollständiges Beispiel finden Sie in den Beispielen.
Da alle Container-Komponenten auf den Redux-Store zugreifen müssen, empfiehlt es sich, eine spezielle <Provider>
-Komponente von React Redux zu verwenden, die den Store an alle untergeordneten Komponenten (intern mit React-Kontext) weitergibt.
Offizielle Dokumentation: http://redux.js.org/docs/basics/UsageWithReact.html
GitHub-Repo: https://github.com/reactjs/react-redux
Ausführung | Veröffentlichungsdatum |
---|---|
5.0.3 | 2017-02-23 |
5.0.2 | 2017-01-11 |
5.0.1 | 2016-12-14 |
5.0.0 | 2016-12-14 |
4.4.6 | 2016-11-14 |
4.4.5 | 2016-04-14 |
4.4.4 | 2016-04-13 |
4.4.3 | 2016-04-12 |
4.4.0 | 2016-02-06 |
4.3.0 | 2016-02-05 |
4.2.0 | 2016-02-01 |
4.1.0 | 2016-01-28 |
4.0.0 | 2015-10-15 |
3.0.0 | 2015-09-24 |
2.0.0 | 2015-09-01 |
1.0.0 | 2015-08-24 |
0,5,0 | 2015-08-07 |
0,1,0 | 2015-07-12 |
Nehmen wir an, wir haben einen Container "CustomersContainer", der eine dumme Komponente "Customers" mit dem Redux-Store verbindet.
In index.js:
import { Component }, React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './redux/rootReducer';
import CustomersContainer from './containers/CustomersContainer';
let store = createStore(rootReducer);
render(
<Provider store={store}>
<CustomersContainer />
</Provider>,
document.getElementById('root')
);
In CustomersContainer:
import React, { Component } from 'react';
import { connect } from 'react-redux';
// Import action creators
import { fetchCustomers } from '../redux/actions';
// Import dumb component
import Customers from '../components/Customers';
// ES6 class declaration
class CustomersContainer extends Component {
componentWillMount() {
// Action fetchCustomers mapped to prop fetchCustomers
this.props.fetchCustomers();
}
render() {
return <Customers customers={this.props.customers} />;
}
}
function mapStateToProps(state) {
return {
customers: state.customers
};
}
// Here we use the shorthand notation for mapDispatchToProps
// it can be used when the props and action creators have the same name
const CustomersContainer = connect(mapStateToProps, { fetchCustomers })(CustomersContainer);
export default CustomersContainer;
In diesem Handbuch wird vorausgesetzt , dass Sie bereits installiert react
, redux
, react-router
und react-redux
und konfiguriert haben , react
, redux
und react-router
., Wenn Sie nicht haben, bitte tun.
Hinweis: Der react-router
keine Abhängigkeit von react-redux
, aber es ist sehr wahrscheinlich, dass wir ihn in unserer Reakt-Anwendung für das Routing verwenden werden. Dies macht es sehr einfach, Reakt-Redux zu verwenden.
Dateiname: app.js
'use strict';
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import { Provider } from 'react-redux';
import store from './stores';
render(
(
<Provider store={ store }>
<Router history={ browserHistory }>
{/* all the routes here */}
</Router>
</Provider>
),
document.getElementById('app')
);
Diese Datei wird für die meisten von Ihnen Sinn machen. Was wir hier tun, ist, den Store von ./stores
und ihn an alle Routen zu übergeben, die den Component Provider
mit höherer Ordnung verwenden, der von react-redux
bereitgestellt wird.
Dadurch ist der Shop in unserer gesamten Anwendung verfügbar.
Betrachten wir nun dieses Szenario . Wir haben eine Komponente UserComponent
die die Daten vom user
Reducer UserComponent
und über eine Schaltfläche verfügt, die beim Anklicken die Daten im Geschäft aktualisiert.
Anwendungsstruktur
Unser rootReducer
hat user
Reduzierer
const rootReducer = combineReducers({
user: userReducer,
})
export default rootReducer;
Unser userReducer
sieht so aus
const default_state = {
users: [],
current_user: {
name: 'John Doe',
email: 'john.doe@gmail.com',
gender: 'Male'
},
etc: {}
};
function userReducer( state=default_state, action ) {
if ( action.type === "UPDATE_CURRENT_USER_DATA" ) {
return Object.assign( {}, state, { current_user: Object.assign( {}, state.current_user, { [action.payload.field]: action.payload.value } ) } );
}
else {
return state;
}
}
export default userReducer;
Und unsere actions
sieht ungefähr so aus
export function updateCurrentUserData( data ) {
return {
type: "UPDATE_CURRENT_USER_DATA",
payload: data
}
}
Zum Schluss arbeiten wir an unserer Komponente
FILENAME: UserComponent.js
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';
let UserComponent = (props) => {
let changeUserDetails = (field, value) => {
// do nothing
}
return(
<div>
<h1>Hello { props.current_user.name }</h1>
<p>Your email address is { props.current_user.email }</p>
<div style={{ marginTop: 30 }}>
<button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
<button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
</div>
</div>
)
}
export default UserComponent;
Natürlich funktioniert das nicht , da wir es noch nicht mit dem Laden verbunden haben.
Falls Sie sich fragen, ist dies eine zustandslose Funktionskomponente , da wir
redux
und keinen internen Zustand für unsere Komponente benötigen. Dies ist der richtige Zeitpunkt für die Verwendung.
Die connect
, die von react-redux
bereitgestellt wird, umfasst drei Parameter
mapStateToProps , mapDispatchToProps und die Komponente selbst.
connect( mapStateToProps, mapDispatchToProps )(Component)
Fügen wir in Verbindung mit mapStateToProps und mapDispatchToProps eine Verbindung zu unserer Komponente UserComponent hinzu
Und lass uns auch unsere changeUserDetails- Funktion aktualisieren. Wenn sie aufgerufen wird, wird dispatch
eine action
an unsere reducers
senden. Abhängig von der Art der Aktion, die unser Reduzierer startet, werden Änderungen am Store vorgenommen, und sobald der Store aktualisiert hat, wird react-redux
erneut react-redux
-render unsere Komponente mit den neuen Daten.
Klingt kompliziert? Es ist wirklich nicht
Unsere UserComponent.js
wird aussehen
'use strict';
import React from 'react';
import { connect } from 'react-redux';
import * as Action from './actions';
const mapStateToProps = ( state, ownProps ) => {
return {
current_user: state.user.current_user,
}
}
const mapDispatchToProps = ( dispatch, ownProps ) => {
return {
updateCurrentUserData: (payload) => dispatch( Action.updateCurrentUserData(payload) ),
}
}
let UserComponent = (props) => {
let changeUserDetails = (field, value) => {
props.updateCurrentUserData({ field: field, value: value });
}
return(
<div>
<h1>Hello { props.current_user.name }</h1>
<p>Your email address is { props.current_user.email }</p>
<div style={{ marginTop: 30 }}>
<button onClick={ () => { changeUserDetails('name', 'Jame Smith') } }>Change Name</button>
<button onClick={ () => { changeUserDetails('email', 'jane@gmail.com') } }>Change Email Address</button>
</div>
</div>
)
}
const ConnectedUserComponent = connect(
mapStateToProps,
mapDispatchToProps
)(UserComponent)
export default ConnectedUserComponent;
Was wir hier gemacht haben, wird hinzugefügt
mapStateToProps : Dadurch können wir die Daten aus dem Speicher abrufen. Wenn sich diese Daten ändern, wird unsere Komponente mit den neuen Daten erneut gerendert.
Unsere Komponente wird nur dann erneut gerendert, wenn die Daten, die unsere Komponente anfordert, Änderungen in der Filiale anfragen und nicht, wenn sich andere Daten in der Filiale ändern.
mapDispatchToProps : Dies ermöglicht uns das Senden von dispatch actions
an alle Reduzierungen von unserer Komponente .. (könnte eine beliebige Komponente sein). Je nach type
der Aktion startet unser userReducer einen neuen Status mit den aktualisierten Daten.
ConnectedUserComponent : Zuletzt haben wir unsere Komponente mit der connect
Methode mit dem Store verbunden, indem alle Parameter übergeben wurden, und die verbundene Komponente wurde exported
.
Wir haben auch unsere changeUserDetails- Funktion aktualisiert, um die method
für Requisiten aufzurufen und die Daten weiterzuleiten. Und props
wiederum senden die von uns aufgerufene Methode an alle Reduzierer.
HINWEIS:
react-redux
unsere Komponente nicht erneut darstellen. Die direkte Verwendung von redux
mit react
scheint wenig schwierig zu sein. Da jede component
Sie bei Änderungen des Speichers aktualisieren möchten, aktualisiert werden muss, müssen Sie diese Komponente beim redux store
abonnieren
React Redux kümmert sich um all dies und macht es wirklich einfach, Komponenten zu schreiben, die die benötigten Daten vom redux store
und benachrichtigt werden können, wenn sich diese Daten ändern.
Zur Installation von react-redux
Sie nur diesen npm
Befehl ausführen
npm install --save react-redux
Und du bist fertig.
Hinweis: React Redux ist abhängig von