12
react-redux #react- redux
react-redux
#react-
redux
Table des matières
À propos 1
Chapitre 1: Commencer à réagir avec Redux 2
Remarques 2
Versions 2
Examples 3
Installation ou configuration 3
Exemple complet 4
Bonjour tout le monde en utilisant React Redux 5
Crédits 10
À propos
You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: react-redux
It is an unofficial and free react-redux ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official react-redux.
The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners.
Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected]
https://riptutorial.com/fr/home 1
Chapitre 1: Commencer à réagir avec Redux
Remarques
React Redux est une bibliothèque qui fournit des liaisons React pour Redux.
Les composants React connus par le magasin Redux sont appelés "Conteneurs", "Composants intelligents" ou "Composant d'ordre supérieur" (HOC). De tels composants, pour utiliser Redux, doivent:
Abonnez-vous au magasin pour obtenir des mises à jour du magasin Redux•Actions d'expédition•
Faire cela à la main implique d'utiliser store.subscribe et store.dispatch(action) dans des conteneurs React.
React Redux simplifie la liaison entre le magasin Redux et un composant de conteneur React par le biais de la fonction de connect , qui mappe les propriétés de l'état Redux et les créateurs d'Action aux accessoires du composant.
connect est une fonction qui crée un composant d'ordre supérieur. Connect accepte 3 fonctions ( mapStateToProps , mapDispatchToProps , mergeProps ) et renvoie un composant conteneur qui encapsule le composant d'origine pour en faire un composant "connecté":
import { connect } from 'react-redux'; const Customers = { ... }; const mapStateToProps = (state) => { ... } const mapDispatchToProps = (dispatch) => { ... } export default connect(mapStateToProps, mapDispatchToProps)(Customers);
Voir la section des exemples pour un exemple complet.
Comme tous les composants de conteneur doivent accéder au magasin Redux, la méthode recommandée consiste à utiliser un composant <Provider> spécial de React Redux, qui transmet le magasin à tous les composants enfants (en interne à l'aide du contexte React).
Documentation officielle: http://redux.js.org/docs/basics/UsageWithReact.html
Repo GitHub: https://github.com/reactjs/react-redux
Versions
Version Date de sortie
5.0.3 2017-02-23
https://riptutorial.com/fr/home 2
Version Date de sortie
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
Examples
Installation ou configuration
En utilisant redux directement react peut sembler peu difficile, comme pour tout component que vous souhaitez mettre à jour lorsque mémorisez vos modifications, vous devez vous abonner ce composant au redux store
React Redux prend soin de tous ces éléments et facilite grandement l'écriture des composants pouvant demander les données dont ils ont besoin à partir du redux store et être notifié uniquement lorsque ces données changent. Cela nous permet d'écrire des composants vraiment efficaces.
Pour installer react-redux il suffit de lancer cette commande npm
https://riptutorial.com/fr/home 3
npm install --save react-redux
Et tu as fini.
Remarque: React Redux dépend de
Réagir (version 0.14 ou ultérieure) et•Redux•
Exemple complet
Supposons que nous ayons un conteneur "CustomersContainer" qui connecte un composant muet "Clients" au magasin Redux.
Dans 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') );
Dans le ClientContainer:
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} />; } }
https://riptutorial.com/fr/home 4
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;
Bonjour tout le monde en utilisant React Redux
Ce guide suppose que vous avez déjà installé react , redux , react-router et react-redux et ont configuré react , redux et react-router . Si vous n'avez pas, S'il vous plaît le faire.
Note: Bien que react-router ne soit pas une dépendance de react-redux , il est très probable que nous l'utilisions dans notre application de réaction pour le routage, ce qui facilite grandement l'utilisation de react-redux.
FILENAME: 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') );
Ce fichier a du sens pour la plupart d'entre vous. Ce que nous faisons ici est d'obtenir le magasin de ./stores et de le transmettre à toutes les routes utilisant le Provider composants d'ordre supérieur fourni par react-redux .
Cela rend le magasin disponible dans notre application.
Maintenant, considérons ce scénario . Nous avons un composant UserComponent qui récupère les données du réducteur user et possède un bouton qui, une fois cliqué, met à jour les données du magasin.
https://riptutorial.com/fr/home 5
Structure de l'application
Notre rootReducer a user réducteur d' user
const rootReducer = combineReducers({ user: userReducer, }) export default rootReducer;
Notre userReducer ressemble à ceci
const default_state = { users: [], current_user: { name: 'John Doe', email: '[email protected]', 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;
Et notre fichier d' actions ressemble à quelque chose comme ça
export function updateCurrentUserData( data ) { return { type: "UPDATE_CURRENT_USER_DATA", payload: data } }
Enfin, permet de travailler sur notre composant
FILENAME: UserComponent.js
'use strict'; import React from 'react'; import { connect } from 'react-redux'; import * as Action from './actions'; let UserComponent = (props) => {
https://riptutorial.com/fr/home 6
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', '[email protected]') } }>Change Email Address</button> </div> </div> ) } export default UserComponent;
Bien sûr, cela ne fonctionnera pas , car nous ne l'avons pas encore connecté au magasin.
Au cas où vous vous poseriez la question, il s'agit d'un composant fonctionnel sans état , puisque nous utilisons redux et que nous n'avons pas vraiment besoin d'un état interne pour notre composant, c'est le bon moment pour l'utiliser.
La méthode de connect fournie par react-redux prend en compte trois paramètres
mapStateToProps , mapDispatchToProps et le composant lui-même.
connect( mapStateToProps, mapDispatchToProps )(Component)
Ajoutons connect à notre composant UserComponent avec mapStateToProps et mapDispatchToProps
Et nous allons également mettre à jour notre fonction changeUserDetails, alors quand appelé, il dispatch une action à nos reducers , et en fonction du type d'action de notre réducteur donnera le coup et apporter des modifications au magasin, et une fois le magasin mis à jour react-redux sera à nouveau -rendre notre composant avec les nouvelles données.
Cela semble compliqué? Ce n'est vraiment pas.
Notre UserComponent.js ressemblera à
'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,
https://riptutorial.com/fr/home 7
} } 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', '[email protected]') } }>Change Email Address</button> </div> </div> ) } const ConnectedUserComponent = connect( mapStateToProps, mapDispatchToProps )(UserComponent) export default ConnectedUserComponent;
Ce qu'on a fait ici est ajouté
mapStateToProps : Cela nous permet d'obtenir les données du magasin et, lorsque ces données changent, notre composant sera restitué avec les nouvelles données.
Notre composant ne rendra le rendu que si les données de notre composant demandent des modifications dans le magasin et non quand d’autres données sont modifiées dans le magasin.
•
mapDispatchToProps : Cela nous permet d' dispatch actions à tous les réducteurs de notre composant .. (peut être n'importe quel composant). Et selon le type d'action, notre userReducer entrera et retournera un nouvel état avec les données mises à jour.
•
ConnectedUserComponent : Enfin, nous avons connecté notre composant au magasin en utilisant la méthode connect en transmettant tous les paramètres et en exported le composant connecté.
•
Nous avons également mis à jour notre fonction changeUserDetails pour appeler la method •
https://riptutorial.com/fr/home 8
sur les accessoires et transmettre également les données. Et les props distribuent à leur tour la méthode appelée à tous les réducteurs.
REMARQUE:
Si nous ne renvoyons pas un nouvel état du réducteur, react-redux ne rendra pas notre composant.
•
Lire Commencer à réagir avec Redux en ligne: https://riptutorial.com/fr/react-redux/topic/5797/commencer-a-reagir-avec-redux
https://riptutorial.com/fr/home 9
Crédits
S. No
Chapitres Contributeurs
1Commencer à réagir avec Redux
Alexg2195, Community, Matteo Frana, Ori Drori, Random User, Thibaut Remy
https://riptutorial.com/fr/home 10
